Quick snippet below: how to create round button in HTML5 with CSS3.

In this case, you can see also a gradient as background. Of course, you can edit or remove it, as you prefer.

.roundBtn {
    margin: auto;
    display: block;
    width: 200px;
    height: 200px;
    line-height: 50px;
    border: 5px solid #cca000;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    background: #f4c000;
    box-shadow: 0 0 3px gray;
    font-size: 15px;
    background-image: radial-gradient(#f4c000, #cca000);
}
Advertisements