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;
}

Demo

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.