Holds a master degree in Computer Science. Has a 6 years work experience doing front end development which has also implied self improving on areas like Design and User Experience. Pedro has posted 33 posts at DZone. You can read more from them at their website. View Full User Profile

Circle Buttons in CSS

09.11.2012
| 5961 views |
  • submit to reddit

This is just a small trick in css to create circle like buttons.
To achieve this just put the width and height equal to each other and equal to the css border radius of a button.
If the button is 20 by 20 px than to make it look like a circle in JavaFX CSS:

.circleButton
{
    -fx-border-radius: 20;
}

I believe this also applies to web CSS3 but I haven’t tested it.
The following picture illustrates a zoom panel that I’ve done. The two buttons for zoom in and zoom out look circle like.

Published at DZone with permission of its author, Pedro Duque Vieira. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)