Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Circle Buttons in CSS

DZone's Guide to

Circle Buttons in CSS

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

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.

Are you using Bitbucket to accomplish your company's mission? Share your company’s mission with #Forthecode for a chance to be featured on our homepage, our social media channels, or win a free t-shirt!

Topics:

Published at DZone with permission of Pedro Duque Vieira. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}