Create stunning buttons with HTML and CSS

05.09.2014 by Ilia Raiskin

HTML CSS

This tutorial contains some ideas and examples for stunning button designs made with HTML and CSS3.

Font

I used Dosis from Google Fonts for all buttons.

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700,800' 
rel='stylesheet' type='text/css'>

Design nr. 1

number one

HTML

<a href="#" class="nr-1">number one</a>

CSS

a.nr-1 {
text-decoration: none;
font-weight: 700;
color: white;
font-size: 15px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
background: rgb(214, 0, 0);
padding: 20px 30px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
-webkit-box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
box-shadow: inset 0px 4px 0px 0px rgba(0, 0, 0, 0.07), 1px 1px 2px 0px rgba(0, 0, 0, 0.09);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a.nr-1:hover {
background: rgb(80, 80, 80);
}

Design nr. 2

number two

HTML

<a href="#" class="nr-2">number two</a>

CSS

a.nr-2 {
text-decoration: none;
font-weight: 400;
color: rgb(175, 175, 175);
font-size: 19px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
padding: 20px 40px;
border: 1px solid rgb(223, 223, 223);
text-transform: uppercase;
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.nr-2:hover {
color: rgba(0, 149, 233, 1);
}

Design nr. 3

number three

HTML

<a href="#" class="nr-3">number three</a>

CSS

a.nr-3 {
text-decoration: none;
font-weight: 800;
color: rgb(255, 255, 255);
font-size: 19px;
font-family: Dosis, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
padding: 20px 40px;
background: rgb(245, 176, 0);
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
-webkit-box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.04);
-ms-transition: all 0.21s ease;
-moz-transition: all 0.21s ease;
-o-transition: all 0.21s ease;
transition: all 0.21s ease;
}
a.nr-3:hover {
background: rgb(213, 213, 213);
color: rgb(158, 158, 158);
text-shadow: none;
}

Create stunning buttons with HTML and CSS

Font

Design nr. 1

HTML

CSS

Design nr. 2

HTML

CSS

Design nr. 3

HTML

CSS

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

Follow & Subscribe

About us

Info