Fancy Button
Beautiful button code I got from http://www.invisionapp.com/
by Mel Karlik
HTML
<a href="#" class="button">
Sign Up Free
<i class="icon"><img src="http://karlikdesign.com/jsfiddle/icon-button-arrowright.png" alt="icon" /></i>
</a>
CSS
.button {
padding: 17px 80px 17px 30px;
font-size: 24px;
font-family: Arial, sans-serif;
width: auto;
cursor: pointer;
display: inline-block;
line-height: 1;
text-decoration: none;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
-ms-border-radius: 1000px;
-o-border-radius: 1000px;
border-radius: 1000px;
color: #FFF;
text-transform: uppercase;
background: #EB468C;
border: 1px solid #E2287B;
position: relative;
text-align: left;
text-shadow: 0 -1px 0 rgba(188, 74, 0, 0.65);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.button i {
top: 9px;
right: 10px;
width: 41px;
height: 41px;
-webkit-border-radius: 41px;
-moz-border-radius: 41px;
-ms-border-radius: 41px;
-o-border-radius: 41px;
border-radius: 41px;
position: absolute;
text-align: center;
-webkit-box-shadow: inset 0 1px 1px rgba(195, 95, 35, 0.88),0 1px 1px rgba(255, 255, 255, 0.27);
-moz-box-shadow: inset 0 1px 1px rgba(195,95,35,0.88),0 1px 1px rgba(255,255,255,0.27);
box-shadow: inset 0 1px 1px rgba(195, 95, 35, 0.88),0 1px 1px rgba(255, 255, 255, 0.27);
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #D63676), color-stop(100%, #DE428E));
background: -webkit-linear-gradient(#D63676,#DE428E);
background: -moz-linear-gradient(#D63676,#DE428E);
background: -o-linear-gradient(#D63676,#DE428E);
background: linear-gradient(#D63676,#DE428E);
}
.button i img {
position: absolute;
height: auto;
top: 15px;
right: 12px;
}
a img {
border:...