Recurly HPP CSS3 Buttons
Make sure to put type=submit on all buttons if you want them to function in IE
HTML
<button id="pay" type=submit>
<img src="http://kizer.me/paypal.png" id="paypal">
Subscribe <span>with</span> Paypal
</button>
<hr>
<button id="pay" class="large" type=submit>
Subscribe
</button>
<hr>
<button id="pay" class="large" type=submit>
Subscribe with My Amex
</button>
<hr>
<button id="disabled" type=submit>
I'm a disabled button
</button>
CSS
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-image: url(http://kizer.me/checker.gif);
margin: 20px 20px;
}
hr {
margin: 30px 5px;
border: 0;
border-top:1px solid #e2e2e2;
}
/* everything above this line is for testing purposes only and not needed in your code base */
/* ======================================================================================== */
button#pay {
/* === Layout ==== */
position:relative;
height: 146px;
max-width: 600px;
padding: 0 10px;
/* === Typography ==== */
font-size: 15px;
font-weight: 700;
color: #302106;
text-shadow: rgba(255,255,255, .5694) 0 1px 0;
text-align: center;
/* === Style ==== */
border: 1px solid #767674;
background: #e7a500;
/* === Round Buttons ==== */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* === Remove Outlines & Accidential Drags ==== */
-webkit-user-select: none;
-moz-user-select: -moz-none;
cursor: default;
outline: none;
/* === Button Fill Colors ==== */
/* For WebKit (Safari, Google Chrome etc) */
background-image:-webkit-gradient(linear, 0% 20%, 0% 100%, from(#FECD00), to(#CE7B00));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #fecd00, #ce7b00);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fecd00, endColorstr=#ce7b00);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fecd00, endColorstr=#ce7b00)";
/* === Shadows, Inset and Drop ==== */
/* For WebKit (Safari, Google Chrome etc) */
-webkit-background-clip: padding-box;
-webkit-box-shadow:
rgba(255, 255, 255, 0.699219) 0px 1px 0px inset,
rgba(0,0,0, 0.269219)...