Over a million developers have joined DZone.
Platinum Partner

Circle Buttons in CSS

· Java Zone

The Java Zone is brought to you in partnership with AppDynamics. Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems.

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.

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.

Topics:

Published at DZone with permission of Pedro Duque Vieira .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}