Examples of flat button styling with CSS3

06.03.2013 by Ilia Raiskin

HTML CSS Design Quick

This tutorial will show you some examples of flat button styling with CSS3. All buttons have an HTML code similar to the following example:

<a href="#" class="your-class-name">Button</a>

Button

.button-1{
text-align:center;
text-decoration: none;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 150%;
color: #FFF;
background: #0CADA7;
padding: 20px 60px;
display: inline-block;
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px 0;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.button-1:hover {
background: #0A948F;
}

Button

.button-2 {
text-align:center;
text-decoration: none;
font-size: 150%;
font-family: sans-serif;
color: #FFF;
-webkit-font-smoothing: antialiased;
background: #EE8532;
padding: 20px 60px;
margin:12px 0px;
display: inline-block;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 3px solid rgba(255, 255, 255, 0.23);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14);
-webkit-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.button-2:hover {
background: #C46C28;
}

Button

.button-3 {
text-align:center;
text-decoration: none;
font-size: 150%;
font-family: sans-serif;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
color: #FFF;
background: #D82C2C;
display: inline-block;
padding: 20px 65px;
margin: 15px 0px;
border: 3px solid rgba(0, 0, 0, 0.16);
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.button-3:hover {
background: #9E1919;
}

About the author

Ilia Raiskin

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

Examples of flat button styling with CSS3

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