JSFiddle - React, Tailwind, and code Playground
by gabrieleromanato
HTML
<button class="download-itunes">Download</button>
CSS
body {
margin: 4em;
text-align: center;
}
button.download-itunes {
background-color: #52a8e8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
background-image: linear-gradient(top, #52a8e8, #377ad0);
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
font: normal 11px "lucida grande", sans-serif;
line-height: 1;
padding: 3px 5px;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
width: 112px;
-webkit-background-clip: padding-box; }
button.download-itunes:hover {
background-color: #3e9ee5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
box-shadow: inset 0...