Variants of circular button styling with CSS

08.11.2013 by Ilia Raiskin

HTML CSS

In this tutorial we will show you how to create several circular buttons with CSS and HTML. We use the following HTML code for all buttons. Note that border-radius:100%; creates a circles as long as the width and the height of an element are equal.

<a class="circular-button-1" href="#">Button</a>
<a class="circular-button-2 href="#">Button</a>
<a class="circular-button-3" href="#">Button</a>

Button

a.circular-button-1 {
display: inline-block;
background: rgb(27, 104, 148);
color: white;
font-size: 18px;
text-decoration: none;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
width: 60px;
height: 20px;
padding: 60px 40px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
margin: 10px;
border: 10px solid rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 0px 10px rgb(27, 104, 148);
-webkit-box-shadow: 0px 0px 0px 10px rgb(27, 104, 148);
box-shadow: 0px 0px 0px 10px rgb(27, 104, 148);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
a.circular-button-1:hover {
background: rgb(73, 73, 73);
-moz-box-shadow: 0px 0px 0px 10px rgb(73, 73, 73);
-webkit-box-shadow: 0px 0px 0px 10px rgb(73, 73, 73);
box-shadow: 0px 0px 0px 10px rgb(73, 73, 73);
}

Button

a.circular-button-2 {
display: inline-block;
background: rgb(194, 23, 9);
color: white;
font-size: 18px;
text-decoration: none;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
width: 60px;
height: 20px;
padding: 60px 40px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
margin: 10px;
border: 10px solid rgba(255, 255, 255, 0.16);
-moz-box-shadow: 0px 0px 0px 5px rgb(163, 53, 44),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0px 0px 0px 5px rgb(163, 53, 44),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
box-shadow: 0px 0px 0px 5px rgb(163, 53, 44),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
a.circular-button-2:hover {
background: rgb(73, 73, 73);
-moz-box-shadow: 0px 0px 0px 5px rgb(80, 80, 80),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0px 0px 0px 5px rgb(80, 80, 80),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
box-shadow: 0px 0px 0px 5px rgb(80, 80, 80),0px 2px 5px 6px rgba(0, 0, 0, 0.22);
}

Button

.circular-button-3 {
display: inline-block;
background: rgb(27, 148, 27);
color: white;
font-size: 18px;
text-decoration: none;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
width: 60px;
height: 20px;
padding: 60px 40px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
margin: 10px;
border: 5px solid rgba(255, 255, 255, 0.13);
-moz-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
border-bottom-color: rgba(0, 0, 0, 0.17);
border-top-color: rgba(0, 0, 0, 0.17);
}
a.circular-button-3:hover {
background: rgb(73, 73, 73);
-moz-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.27);
}

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Variants of circular button styling with CSS

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info