JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="button">
<small>Available on the Apple</small> App Store
</a>
CSS
a {
color: #fff;
text-decoration: none;
}
.button {
font-size: 36px;
text-shadow: 0px -1px 1px #80ab5d;
clear: both;
display: inline-block;
float: left;
overflow: hidden;
position: relative;
height: 60px;
margin: 10px 0px;
padding: 15px 105px 15px 90px;
background: -moz-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
border: 1px solid #80ab5d;
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset,
1px 1px 3px rgba(0,0,0,0.2);
-moz-transition: box-shadow 0.3s ease-in-out;
-webkit-transition: box-shadow 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out;
}
.button small {
font-size: 13px;
letter-spacing: 1px;
text-shadow: none;
display: block;
}
.button small:before {
content: "$29";
font-size: 34px;
position: absolute;
z-index: 10;
top: 28px;
left: 23px;
color: #6d954e;
text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
.button:before {
content: url(http://www.webmasters.by/images/articles/css3-animated-buttons/AnimatedButtons/images/icons/1.png);
position: absolute;
z-index: 20;
top: 13px;
left: 15px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button small:after {
content: "";
position: absolute;
z-index: 10;
height: 38px;
top: 50%;
right: 20px;
margin: -20px 0px 0px -20px;
width: 38px;
border-radius: 20px;
opacity: 0.7;
background: #4e5c50;
border: 1px solid rgba(0,0,0,0.5);
box-shadow:0px...