Author: | |
---|---|
Views Total: | 311 views |
Official Page: | Go to website |
Last Update: | January 14, 2014 |
License: | MIT |
Preview:

Description:
In this post we’re going to create some trendy fashion flat styled web buttons by using CSS3 box-shadow
property.
How to use it:
Create buttons for 3 states (normal, hover and pressed.)
<div class="wrap"> <div class="normal"> Normal </div> <div class="hover"> hover </div> <div class="pressed"> Pressed </div> </div>
The CSS
.normal { border-radius: 5px; background-color: #2ecc71; -webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34); box-shadow: inset 0 -6px 1px rgba(123,123,123,.34); color: #fff; text-align: center; padding: 10px 50px; font-size: 42px; font-family: arial; font-weight: bold; display: inline-block; width: 200px; } .hover { border-radius: 5px; background-color: #34e57f; -webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34); box-shadow: inset 0 -6px 1px rgba(123,123,123,.34); color: #fff; text-align: center; padding: 10px 50px; font-size: 42px; font-family: arial; font-weight: bold; display: inline-block; width: 200px; } .pressed { border-radius: 5px; background-color: #29b564; -webkit-box-shadow: inset 0 5px 0px rgba(123,123,123,.34); box-shadow: inset 0 5px 0px rgba(123,123,123,.34); color: #fff; text-align: center; padding: 10px 50px; font-size: 42px; font-family: arial; font-weight: bold; display: inline-block; width: 200px; } .wrap { width: 200px; margin: 0 auto; } div { margin: 10px 0px; }