CSS3 Button online Generator - HTML und CSS3 Code - kostenlos CSS3 Buttons erstellen

Color 1:#FF4040 Color 2:#CD3333 Font-Color: #222222	Roundness: 1px	Roundness: 5px	Roundness: 15px	Roundness: 25px
Font-Size:10px Vertical-Padding:6px Horizontal-Padding:8px	Submit CSS .brown10px1 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 10px Helvetica, sans-serif; padding: 6px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 1; -moz-border-radius: 1; border-radius: 1; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown10px1:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown10px1:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown10px1'>Submit</a>	Submit CSS .brown10px5 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 10px Helvetica, sans-serif; padding: 6px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown10px5:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown10px5:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown10px5'>Submit</a>	Submit CSS .brown10px15 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 10px Helvetica, sans-serif; padding: 6px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 15; -moz-border-radius: 15; border-radius: 15; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown10px15:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown10px15:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown10px15'>Submit</a>	Submit CSS .brown10px25 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 10px Helvetica, sans-serif; padding: 6px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 25; -moz-border-radius: 25; border-radius: 25; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown10px25:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown10px25:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown10px25'>Submit</a>
Font-Size:12px Vertical-Padding:8px Horizontal-Padding:12px	Submit CSS .brown12px1 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 12px Helvetica, sans-serif; padding: 8px 12px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 1; -moz-border-radius: 1; border-radius: 1; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown12px1:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown12px1:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown12px1'>Submit</a>	Submit CSS .brown12px5 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 12px Helvetica, sans-serif; padding: 8px 12px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown12px5:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown12px5:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown12px5'>Submit</a>	Submit CSS .brown12px15 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 12px Helvetica, sans-serif; padding: 8px 12px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 15; -moz-border-radius: 15; border-radius: 15; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown12px15:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown12px15:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown12px15'>Submit</a>	Submit CSS .brown12px25 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 12px Helvetica, sans-serif; padding: 8px 12px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 25; -moz-border-radius: 25; border-radius: 25; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown12px25:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown12px25:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown12px25'>Submit</a>
Font-Size:14px Vertical-Padding:10px Horizontal-Padding:16px	Submit CSS .brown14px1 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Helvetica, sans-serif; padding: 10px 16px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 1; -moz-border-radius: 1; border-radius: 1; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown14px1:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown14px1:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown14px1'>Submit</a>	Submit CSS .brown14px5 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Helvetica, sans-serif; padding: 10px 16px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown14px5:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown14px5:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown14px5'>Submit</a>	Submit CSS .brown14px15 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Helvetica, sans-serif; padding: 10px 16px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 15; -moz-border-radius: 15; border-radius: 15; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown14px15:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown14px15:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown14px15'>Submit</a>	Submit CSS .brown14px25 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Helvetica, sans-serif; padding: 10px 16px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 25; -moz-border-radius: 25; border-radius: 25; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown14px25:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown14px25:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown14px25'>Submit</a>
Font-Size:16px Vertical-Padding:12px Horizontal-Padding:20px	Submit CSS .brown16px1 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px Helvetica, sans-serif; padding: 12px 20px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 1; -moz-border-radius: 1; border-radius: 1; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown16px1:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown16px1:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown16px1'>Submit</a>	Submit CSS .brown16px5 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px Helvetica, sans-serif; padding: 12px 20px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown16px5:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown16px5:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown16px5'>Submit</a>	Submit CSS .brown16px15 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px Helvetica, sans-serif; padding: 12px 20px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 15; -moz-border-radius: 15; border-radius: 15; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown16px15:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown16px15:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown16px15'>Submit</a>	Submit CSS .brown16px25 { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px Helvetica, sans-serif; padding: 12px 20px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 25; -moz-border-radius: 25; border-radius: 25; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #222222; background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); } .brown16px25:hover { background: #FF4040; background: -webkit-gradient(linear, left top, left bottom, from(#CD3333), to(#FF4040)); background: -moz-linear-gradient(top, #CD3333, #FF4040); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#CD3333', endColorstr='#FF4040'); text-decoration: none; color: #222222; } .brown16px25:active { color: #222222; background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD3333)); background: -moz-linear-gradient(top, #FF4040, #CD3333); filter: progid:DXImaGETransform.Microsoft.gradient(startColorstr='#FF4040', endColorstr='#CD3333'); position: relative; top: 1px; } HTML <a href='#' class='brown16px25'>Submit</a>