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

Atomist automates your software deliver experience. It's how modern teams deliver modern software.

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.

Get the open source Atomist Software Delivery Machine and start automating your delivery right there on your own laptop, today!

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}