Click here to Skip to main content
13,736,547 members
Click here to Skip to main content
Add your own
alternative version


112 bookmarked
Posted 26 Nov 1999
Licenced CPOL

Round Buttons

, 11 Jun 2003
Rate this:
Please Sign up or sign in to vote.
A class that turns rectangular buttons into round buttons.

Sample Image


I wanted a button that looked exactly like normal buttons, but instead I wanted them circular. This class can be used like any other owner drawn control - simply include the header file, and declare your button controls as CRoundButton instead of CButton

First of all I make sure the buttons are circles (and not ellipses) and store the centre and radius of the button. Next I simply make the button owner drawn and draw it like every other owner drwn button, but instead of being able to use nice routines like Draw3dRect, I had to roll my own circle drawing routine which would draw each pixel with the correct colour dependant on the point on the circle I was drawing.

I will not include the full source in this page - it is available for download here. The owner draw part is simple and follows along the lines of any other owner drawn button. The circle drawing routine is a standard algorithm, with the only modification in calculating the pixel colour. Given two colours crBright and crDark, and an angle relative to the x-axis, the colour for a pixel can be calculated using the following.

COLORREF GetColour(double dAngle, COLORREF crBright, COLORREF crDark)
#define Rad2Deg            180.0/3.1415 
#define LIGHT_SOURCE_ANGLE  -2.356    // -2.356 radians = -135 degrees, 
                                      // i.e. From the top left of the screen

    ASSERT(dAngle > -3.1416 && dAngle < 3.1416);
    double dAngleDifference = LIGHT_SOURCE_ANGLE - dAngle;

    if (dAngleDifference < -3.1415) 
        dAngleDifference = 6.293 + dAngleDifference;
    else if (dAngleDifference > 3.1415) 
        dAngleDifference = 6.293 - dAngleDifference;

    double Weight = 0.5*(cos(dAngleDifference)+1.0);

    BYTE Red   = (BYTE) (Weight*GetRValue(crBright) + 
    BYTE Green = (BYTE) (Weight*GetGValue(crBright) + 
    BYTE Blue  = (BYTE) (Weight*GetBValue(crBright) + 

    return RGB(Red, Green, Blue);

This is a simple linear interpolation between the two colours based on the cosine of the angle between the light source and the point. Angles are measured from the +ve x-axis (i.e. (1,0) = 0 degrees, (0,1) = 90 degrees ), but remember: positive y points down!


Tom Kalmijn kindly added routines that post-process the button image to smooth out the jagged edges. His method uses a nearest-neighbours algorithm to interpolate missing pixels. It's not particularly fast but it does increase smoothing.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Chris Maunder
Founder CodeProject
Canada Canada
Chris is the Co-founder, Administrator, Architect, Chief Editor and Shameless Hack who wrote and runs The Code Project. He's been programming since 1988 while pretending to be, in various guises, an astrophysicist, mathematician, physicist, hydrologist, geomorphologist, defence intelligence researcher and then, when all that got a bit rough on the nerves, a web developer. He is a Microsoft Visual C++ MVP both globally and for Canada locally.

His programming experience includes C/C++, C#, SQL, MFC, ASP, ASP.NET, and far, far too much FORTRAN. He has worked on PocketPCs, AIX mainframes, Sun workstations, and a CRAY YMP C90 behemoth but finds notebooks take up less desk space.

He dodges, he weaves, and he never gets enough sleep. He is kind to small animals.

Chris was born and bred in Australia but splits his time between Toronto and Melbourne, depending on the weather. For relaxation he is into road cycling, snowboarding, rock climbing, and storm chasing.

You may also be interested in...

Comments and Discussions

QuestionBitmap Adding Pin
Ajin Vijay25-Jul-17 3:25
memberAjin Vijay25-Jul-17 3:25 
QuestionHow to add color on the Round Button Pin
vipreshshah10-Jun-15 20:19
membervipreshshah10-Jun-15 20:19 
GeneralExcellent article! Pin
DrABELL16-Sep-09 12:39
memberDrABELL16-Sep-09 12:39 
GeneralA nice article Pin
Derek Bartram22-Mar-08 10:53
memberDerek Bartram22-Mar-08 10:53 
Questionhow to implement this class to see the buttons Pin
toutounesan_bg14-Aug-07 11:12
membertoutounesan_bg14-Aug-07 11:12 
QuestionHow to add button dynamic in VB6.0? Pin
myphuong2442-Sep-05 19:32
membermyphuong2442-Sep-05 19:32 
GeneralSome explanations,please... Pin
Dudi Avramov12-Dec-04 4:49
memberDudi Avramov12-Dec-04 4:49 
GeneralRe: Some explanations,please... Pin
Dudi Avramov13-Dec-04 0:14
memberDudi Avramov13-Dec-04 0:14 
QuestionCan anyone show me some good ebook about design control Pin
hoangbao6-Nov-04 2:58
memberhoangbao6-Nov-04 2:58 
QuestionHow to insert this in view class Pin
mymauve2119-Mar-04 1:10
membermymauve2119-Mar-04 1:10 
AnswerRe: How to insert this in view class Pin
maruku8-Nov-04 18:58
membermaruku8-Nov-04 18:58 
AnswerRe: How to insert this in view class Pin
toucherzxb25-Nov-07 20:09
membertoucherzxb25-Nov-07 20:09 
QuestionUnderline the shortcut character? Pin
AAntix7-Nov-03 10:15
memberAAntix7-Nov-03 10:15 
Questionhow to create command button through code Pin
Anonymous30-Sep-03 4:30
memberAnonymous30-Sep-03 4:30 
QuestionHow To Create a Round Shape Control ? Pin
Vikrant Vikrant29-Jun-03 21:58
memberVikrant Vikrant29-Jun-03 21:58 
GeneralNot the most important thing in the world Pin
tkalmijn9-Jun-03 21:48
membertkalmijn9-Jun-03 21:48 
GeneralRe: Not the most important thing in the world Pin
Chris Maunder10-Jun-03 4:57
adminChris Maunder10-Jun-03 4:57 
GeneralWhere can we declare Pin
Aymen++5-Oct-02 11:53
memberAymen++5-Oct-02 11:53 
GeneralRound Button Java Pin
26-Jun-02 5:38
member26-Jun-02 5:38 
GeneralRe: Round Button Java Pin
Sebuliba Peter1-Jan-03 19:48
sussSebuliba Peter1-Jan-03 19:48 
Question#How to implement a round button in C#? Pin
24-Jun-02 6:42
member24-Jun-02 6:42 
GeneralKewl... Pin
alex.barylski2-Apr-02 14:35
memberalex.barylski2-Apr-02 14:35 
GeneralRGN qustion Pin
kuzi6-Mar-02 5:53
memberkuzi6-Mar-02 5:53 
GeneralThe size of the circle Pin
Huda2-Sep-01 4:34
memberHuda2-Sep-01 4:34 
GeneralCool but... Pin
Earl Rex Arao-arao10-May-01 23:11
memberEarl Rex Arao-arao10-May-01 23:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180920.1 | Last Updated 12 Jun 2003
Article Copyright 1999 by Chris Maunder
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid