Quick Rendering Color-shifting CSS3 Buttons

Uses a 1x1 pixel animated gif to achieve the color-shift. Also includes cross browser compliant CSS to achieve text effects, rounded corners and drop shadow

by Pete Fecteau

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quick Rendering Color-shifting CSS3 Buttons</title>
</head>

<body>
    <h2>Quick Rendering Color-shifting CSS3 Buttons</h2>
    <div class="content">
        <div class="wrap"><a class="WaveRider" href="#">CLICK HERE</a></div>
        <div class="wrap"><a class="PacificHeights" href="#">CLICK HERE</a></div>
    </div>
</body>
</html>

CSS

body {
    font-family:Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
}
h2 {
    font-size:24px;
    font-weight:bold;
}
div.content {
    width:200px;
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-100px;
}

a {
    text-decoration:none;
    color:#FFF;
    border-radius:5px;
    padding:5px 10px 6px 10px;
    float:left;
    display:block;
    margin:8px 10px 10px 10px;
    
    /* Embossed Text */
    text-shadow:1px 1px 0 #FFF;
    text-shadow:-1px -1px 0 #000;
    
    /* Drop Shadow */
    -moz-box-shadow: 0px 3px 3px #333;
    -webkit-box-shadow: 0px 3px 3px #333;
    box-shadow: 0px 3px 3px #333;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#333333')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#333333');
}

a:hover {
    background:#666;
    margin-top:10px;
    
    /* Drop Shadow */
    -moz-box-shadow: 0px 1px 1px #333;
    -webkit-box-shadow: 0px 1px 1px #333;
    box-shadow: 0px 1px 1px #333;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#333333')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#333333');
}

a.WaveRider {
    background:url(http://buttonpresser.com/images/WaveRider.gif) repeat;
    margin-bottom:20px;
}

a.PacificHeights {
    background: url(http://buttonpresser.com/images/PacificHeights.gif) repeat;
    clear:left;
}