Cool Flat Button Design CSS

Beautiful Flat Buttons Design Using CSS

<a class="btn btn-lg" href="#">Download</a>
<a class="btn btn-lg success" href="#">Download</a>
<a class="btn btn-lg warning" href="#">Download</a>
<a class="btn btn-lg danger" href="#">Download</a>
<a class="btn btn-lg info" href="#">Download</a>
<a class="btn btn-lg darker" href="#">Download</a>

body{background-color:#563d7c;padding:50px;}
a{color:#428bca;text-decoration:none;-webkit-transition:.50s;-moz-transition:.50s;-ms-transition:.50s;-o-transition:.50s;transition:.20s;}
.btn{display:inline-block;margin-bottom:5px;font-size:14px;font-weight:normal;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;color:#fff;background-color:transparent;border-color:#FFFFFF;padding:6px 12px;}
.btn-lg{font-size:18px;line-height:1.33;border-radius:6px;padding:10px 16px;}
.btn:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff;}
.success{background:#5cb85c;}
.success:hover{color:#5cb85c;}
.warning{background:#f0ad4e;}
.warning:hover{color:#f0ad4e;}
.danger{background:#d9534f;}
.danger:hover{color:#d9534f;}
.info{background:#5bc0de;}
.info:hover{color:#5bc0de;}
.darker{background:#222222;}
.darker:hover{color:#222222;}

DEMO