Button Styles

											
<div class="row">
<div class="col-lg-4 col-md-4 mb-30">
<a class="button large mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button medium mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button small mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button extra-small" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
</div>
<div class="col-lg-4 col-md-4 mb-30">
<a class="button large button-black mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button medium button-black mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button small button-black mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button extra-small button-black mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
</div>
<div class="col-lg-4 col-md-4 mb-30">
<a class="button large button-white mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button medium button-white mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button small button-white mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
<a class="button extra-small button-white mb-20" href="#"><span>Buttons </span><i class="fa fa-hand-o-right"></i></a>
<br>
</div>
</div>
<div class="row mt-20">
<div class="col-lg-4 col-md-4">
<a class="button large mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button medium mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button small mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button extra-small mb-20" href="#"><span>Buttons </span> </a>
<br>
</div>
<div class="col-lg-4 col-md-4">
<a class="button large button-black mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button medium button-black mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button small button-black mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button extra-small button-black mb-20" href="#"><span>Buttons </span> </a>
<br>
</div>
<div class="col-lg-4 col-md-4">
<a class="button large button-white mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button medium button-white mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button small button-white mb-20" href="#"><span>Buttons </span> </a>
<br>
<a class="button extra-small button-white mb-20" href="#"><span>Buttons </span> </a>
<br>
</div>
</div>	
										
									

										
//
a.button {
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
cursor: pointer;
display: inline-block;
margin-right: 10px;
overflow: hidden;
padding: 0;
position: relative;
background-color: #ff4081;
color: #fff;
font-size: 15px;
}
a.button i {
background: rgba(0, 0, 0, 0.09);
display: block;
float: left;
padding: 14px;
font-size: 16px;
color: #fff;
font-weight: normal;
width: 50px;
text-align: center;
}
a.button span {
display: block;
float: left;
position: relative;
z-index: 2;
padding: 11px 20px;
font-size: 15px;
color: #fff;
font-weight: normal;
}
a.button::after {
background: rgba(0, 0, 0, 0.09) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 0;
z-index: 1;
}
a.button:hover::after { width: 100% }
a.button.button-white {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
color: #4fc1f0;
cursor: pointer;
display: inline-block;
font-size: 15px;
margin-right: 10px;
overflow: hidden;
padding: 0;
position: relative;
}
a.button.button-white i {
background: rgba(0, 0, 0, 0.09);
display: block;
float: left;
padding: 14px;
font-size: 16px;
color: #4FC1F0;
font-weight: normal;
width: 50px;
text-align: center;
}
a.button.button-white span {
display: block;
float: left;
position: relative;
z-index: 2;
padding: 11px 20px;
font-size: 15px;
color: #4FC1F0;
font-weight: normal;
}
a.button.button-grey {
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
cursor: pointer;
display: inline-block;
margin-right: 10px;
overflow: hidden;
padding: 0;
position: relative;
background-color: #eceff7;
color: #4FC1F0;
font-size: 15px;
}
a.button.button-grey i {
background: rgba(0, 0, 0, 0.09);
display: block;
float: left;
padding: 14px;
font-size: 16px;
color: #4FC1F0;
font-weight: normal;
width: 50px;
text-align: center;
}
a.button.button-grey span {
display: block;
float: left;
position: relative;
z-index: 2;
padding: 11px 20px;
font-size: 15px;
color: #4FC1F0;
font-weight: normal;
}
a.button.button-black {
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
cursor: pointer;
display: inline-block;
margin-right: 10px;
overflow: hidden;
padding: 0;
position: relative;
background-color: #444444;
color: #4FC1F0;
font-size: 15px;
}
a.button.button-black i {
background: rgba(0, 0, 0, 0.3);
display: block;
float: left;
padding: 14px;
font-size: 16px;
color: #fff;
font-weight: normal;
width: 50px;
text-align: center;
}
a.button.button-black span {
display: block;
float: left;
position: relative;
z-index: 2;
padding: 11px 20px;
font-size: 15px;
color: #fff;
font-weight: normal;
}
a.button-border span {
border: 0 none;
border-radius: 3px;
cursor: pointer;
display: inline-block;
padding: 11px 20px;
margin-right: 10px;
overflow: hidden;
position: relative;
background-color: transparent;
color: #4FC1F0;
font-size: 15px;
border: 1px solid #4FC1F0;
}
a.button-border span:hover {
box-shadow: -200px 0 0 #4FC1F0 inset;
color: #fff;
border-color: #4FC1F0;
}
a.button-border-white span {
border: 0 none;
border-radius: 3px;
cursor: pointer;
display: inline-block;
padding: 11px 20px;
margin-right: 10px;
overflow: hidden;
position: relative;
background-color: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #fff;
}
a.button-border-white span:hover {
box-shadow: -200px 0 0 #fff inset;
color: #4FC1F0;
border-color: #fff;
}


//
a.button-small {
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
cursor: pointer;
display: inline-block;
margin-right: 10px;
overflow: hidden;
padding: 0;
position: relative;
background-color: #4FC1F0;
color: #fff;
font-size: 15px;
}
a.button-small i {
background: rgba(0, 0, 0, 0.09);
display: block;
float: left;
padding: 10px;
font-size: 13px;
color: #fff;
font-weight: normal;
width: 40px;
text-align: center;
}
a.button-small span {
display: block;
float: left;
position: relative;
z-index: 2;
padding: 8px 10px;
font-size: 13px;
color: #fff;
font-weight: normal;
}
a.button-small:after {
background: rgba(0, 0, 0, 0.09) none repeat scroll 0 0;
content: "";
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 0;
z-index: 1;
}
a.button-small:hover::after { width: 100% }

//
a.button.large {margin-right: 0px; }
a.button.large span { padding: 16px 80px; font-size: 18px;  }
a.button.large i { padding: 20px; width: 60px; font-size: 18px; }
a.button.medium span { padding: 14px 60px; font-size: 16px; }
a.button.medium i { padding: 17px; width: 50px; font-size: 16px; }
a.button.small span { padding: 12px 40px; }
a.button.small i { padding: 14px; width: 45px; }
a.button.small span { padding: 12px 40px; }
a.button.small i { padding: 15px; width: 45px; }
a.button.extra-small span { padding: 8px 20px; font-size: 13px; }
a.button.extra-small i { padding: 11px; width: 38px; font-size: 13px; }