Flat design doesn’t require much hardwork, you just have to pick a beautiful color, draw a box or two, place them on right place and you are good to go, right?

Wrong!

Easier said than done. In this article we will create some beautiful pressable CSS buttons and find out how easy it is.

Before we begin, lets see what we will have created by the end of this post.

Demo:

That looks good, flat, beautiful, you can even press it and on the top of it, its all pure CSS.

Here is the HTML code, fairly easy to understand:
[html]<a class=”btn-flat text-center” href=””>Click Me</a>[/html]
Now, lets jump to the cold water and write the CSS code that’s gonna be the Heart and Soul of this button.

Making it Flat & Beautiful:
[css].btn-flat {
background: none repeat scroll 0 0 #F25757;
border-bottom: 3px solid #D33B3B;
border-radius: 5px;
color: #FFFFFF;
padding: 5px 15px;
position: relative;
text-decoration: none;
}

.btn-flat:hover {
text-decoration: none !important;
}
[/css]
Making it Lively:

[css]
.btn-flat:active {
border-bottom: 1px solid #D33B3B;
top: 2px;
}
[/css]