CSS round buttons

http://codeitdown.com/css-round-buttons/

CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadows and/or images to the buttons to get to get the perfect look and feel. The round buttons, both fixed-size and responsive work in all modern browsers and will render square in CSS2- browsers.

Why CSS round buttons?

First, why CSS? Because it's easy and clean. Using Javascript is not necessary and is more complicated than creating simple CSS buttons. Besides, CSS3 has everything you need to add effects and animations to these buttons. Unless you are doing something very creative, CSS is more than enough.

Now, why round buttons? Round buttons have a ton of applications. Round home and help buttons, as well as video or music player buttons are very common in web sites and applications. Using responsive buttons means that they will automatically resize without distortion nor need for extra CSS rules. A simple SVG image may be used as an icon for best results. SVG vector shapes resize without loss of detail, making them great for responsive design.

Round buttons may also hold text. "GO" buttons, which, for example, start a tutorial or product tour are the most common example. Round OK buttons are also quite popular. In general, they are used to hold a single short line of text.

Fixed size CSS round buttons

The fixed width CSS round button is staighforward and a single a tag will do it. These are perfect as "GO" or "OK" buttons because responsive buttons don't do well with text. To implement them, use border-radius:50% to create a circle from an a tag and then add the hover effect:

OK

<a href="http://example.com" class="round-button">OK</a>

.round-button {
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #262626;
}

Here's a Rounded Button JSFiddle to play around with the CSS.

Responsive CSS round buttons

Responsiveness adds just a bit of difficulty. Creating responsive circles is very simple as explained in Responsive CSS Circles. In a responsive round button, the a tag is nested in the circle's div and covers its area completely. The circle uses overflow:hidden to keep the clickable area from overflowing it. The hover behaviour is then added to the circle and an SVG home icon is used. SVG has the great advantage of scaling gracefully without distortion. To the code:

<div class="round-button">
    <a href="http://example.com">
        <img src="http://codeitdown.com/media/Home_Icon.svg" alt="Home" />
    </a>
</div>

.round-button {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    overflow: hidden;
    background: #464646;
    box-shadow: 0 0 3px gray;
}
.round-button:hover {
    background: #262626;
}
.round-button img {
    display: block;
    width: 76%;
    padding: 12%;
    height: auto;
}

Here's the Fiddle. Because the font-size remains the same, the text may overflow the circle in small viewports. Either reduce font-size or remove the button in small viewports to avoid it.

Adding animations to your CSS round buttons is now very simple. Creating oval-shapped buttons is just a matter of using an slash between the horizontal radius and vertical radius, for example: border-radius: 50% / 25%.

Browser support

The border-radius property is CSS3. The buttons will render in all modern browsers. IE8 and below will render square instead of circular buttons. See caniuse border-radius for detailed support information.

Note that all the CSS code above assumes box-sizing:content-box. If necessary, add the following rules to the button's div:

-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;

Please share any improvements/suggestions you have. The code is meant to work with box-sizing:content-box, the CSS default. Add this rule and its prefixes (-moz and -webkit) if necessary.