Google Material Design Circular Button CSS

By Hawkee on Dec 08, 2014

In my attempt to mimic Google's Material Design circular button I ran into some hardships dealing with cross browser compatibility. Centering a plain text "+" sign within a circle is much more difficult that it seems. Not because the CSS is complicated, but because each browser interprets the CSS differently. There is a particular discrepancy between Mozilla and Webkit. My first attempt used line-height which works just fine for font icons, but not so well with plain text. I eventually found a solution that uses absolute positioning and top: 50%. This gave me a consistent position between browsers.

You'll have to play around with margin-top to center the text according to the font size, but the result will be consistent between browsers.

.btn-round {
    background-color: #d23f31;
    border-radius: 999em;
    width: 56px;
    height: 56px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    line-height: 1;
    font-size: 36px;
    position: relative;
    cursor: pointer;

.btn-round span {
    position: absolute;
    left: 0;
    top: 50%;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: -22px;
    color: #FFF;


And here is how it'll turn out. You can also see this same button on the homepage here to post a new thread or page. This example only styles the buttons and does not include any transitions or animations. I'll leave those up to you.

See the Pen YPwexJ by Scott Aikin (@Hawkee) on CodePen.


Sign in to comment.
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.