Набор Стилей CSS3 Для Кнопок

by Andrey Dobrovoi

HTML

<div class="container">  
<a href="#" class="ml-btn-1">Текст Кнопки</a>
<a href="#" class="ml-btn-2">Текст Кнопки</a>
<a href="#" class="ml-btn-3">Текст Кнопки</a>
<a href="#" class="ml-btn-4">Текст Кнопки</a>
<a href="#" class="ml-btn-5">Текст Кнопки</a>
<a href="#" class="ml-btn-6">Текст Кнопки</a>
<a href="#" class="ml-btn-7">Текст Кнопки</a>
<a href="#" class="ml-btn-8">Текст Кнопки</a>
<a href="#" class="ml-btn-9">Текст Кнопки</a>
<a href="#" class="ml-btn-10">Текст Кнопки</a>
<a href="#" class="ml-btn-11">Текст Кнопки</a>
<a href="#" class="ml-btn-12">Текст Кнопки</a>
<a href="#" class="ml-btn-13">Текст Кнопки</a>
<a href="#" class="ml-btn-14">Текст Кнопки</a>
<a href="#" class="ml-btn-15">Текст Кнопки</a>
<a href="#" class="ml-btn-16">Текст Кнопки</a>
<a href="#" class="ml-btn-17">Текст Кнопки</a>
<a href="#" class="ml-btn-18">Текст Кнопки</a>
<a href="#" class="ml-btn-19">Текст Кнопки</a>
<a href="#" class="ml-btn-20">Текст Кнопки</a>
 <div style="height:20px;"></div>
<a href="#" class="ml-btn-1 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-2 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-3 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-4 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-5 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-6 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-7 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-8 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-9 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-10 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-11 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-12 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-13 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-14 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-15 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-16 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-17 rounded">Текст Кнопки</a>
<a href="#" class="ml-btn-18 rounded">Текст Кнопки</a>
<a href="#"...

CSS

body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:bold;
margin:0;
padding:0;
background:#fff;
}
.container{
width:560px;
margin:20px auto;
padding:10px;
}
.container a{
margin:0 15px 20px 0;
}
a:hover{
opacity:0.8;
}
a:active{
opacity:0.9;
}
.ml-btn-1{
display:inline-block;
text-decoration:none;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
font-weight:bold;
line-height:240%;
color:rgb(102,102,102);
text-align:center;
text-shadow:0px 1px 0px rgba(255,255,255,0.5);
background-color:#fbfbfb;
background-image:-moz-linear-gradient(53% 100% 90deg,rgb(235,235,235) 0%,rgb(254,254,254) 100%);
background-image:-webkit-gradient(linear,53% 100%,53% 3%,color-stop(0,rgb(235,235,235)),color-stop(1,rgb(254,254,254)));
background-image:-webkit-linear-gradient(90deg,rgb(235,235,235) 0%,rgb(254,254,254) 100%);
background-image:-o-linear-gradient(90deg,rgb(235,235,235) 0%,rgb(254,254,254) 100%);
background-image:-ms-linear-gradient(90deg,rgb(235,235,235) 0%,rgb(254,254,254) 100%);
background-image:linear-gradient(90deg,rgb(235,235,235) 0%,rgb(254,254,254) 100%);
width:120px;height:30px;border-color:rgb(180,180,180);
border-width:1px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;border-style:solid;
-moz-box-shadow:0px 0px 0px 3px rgba(0,0,0,0.05),inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 0px 0px 3px rgba(0,0,0,0.05),inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 0px 0px 3px rgba(0,0,0,0.05),inset 0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffefefe,endColorstr=#ffebebeb,GradientType=0)progid:DXImageTransform.Microsoft.Glow(Color=#ff000000,Strength=3)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffefefe,endColorstr=#ffebebeb,GradientType=0) progid:DXImageTransform.Microsoft.Glow(Color=#ff000000,Strength=3);
}
		
.ml-btn-2{
display:inline-block;
text-decoration:none;
font-family:"Helvetica...