Rounded Cutout v2

Using CSS ONLY to created 3D cutouts. Version 2 has different backgrounds and fades.

by Robert Herring

HTML

<body>
    <div class="wrapper">
        <div class="bg"></div>
        <div class="outerbutton"> <a href="#">
                <div class="innerbutton dropshadow">
                    <div class="innerring">
                        <h4>Book <span>an</span> Appointment</h4>
                    </div>
                </div>
            </a>

        </div>
        <div class="shadow">
            <div class="shadowbox"></div>
            <div class="shadowbutton"></div>
        </div>
        <div class="reflect">
            <div class="reflectbox"></div>
            <div class="reflectbutton"></div>
        </div>
    </div>
</body>

CSS

* { margin:0; padding:0; text-decoration:none; }

.dropshadow {
    -moz-box-shadow: 0px 0px 3px #000;
    -webkit-box-shadow: 0px 0px 3px #000;
    box-shadow: 0px 0px 3px #000;
}
body {
    height:600px;
    width:100%;
    background: #1F2327 url('http://www.isbeingdesigned.com/images/vic.png') top center repeat;
}
.bg {
    height: 150px;
    width: 100%;
    background: #EFEFEF url('http://www.isbeingdesigned.com/images/diag.png') 0 0 repeat fixed;
}
.outerbutton {
    width: 250px;
    height: 50px;
    margin:-25px auto 0 auto;
    padding: 2px;
    background: #EFEFEF url('http://www.isbeingdesigned.com/images/diag.png') 0 0 repeat fixed;
    border-radius: 40px;
}
.innerbutton h4 {
    width:240px;
    height:40px;
    margin: 9px auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.125em;
    text-shadow: 0px 0px 10px #000;
    text-transform:uppercase;
    color: #fff;
    text-align:center;
    float:left;
}
.innerbutton span {
    margin-top:3px;
    font-family: Parkavenue, cursive;
    font-size: 95%;
    vertical-align: top;
    text-transform:lowercase;
}
.innerbutton {
    width: 242px;
    height: 42px;
    margin: 2px;
    background: #1F2327;
    /* Old browsers */
    background: -moz-linear-gradient(top, #2F353C 0%, #1F2327 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2F353C), color-stop(100%, #1F2327));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2F353C 0%, #1F2327 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2F353C 0%, #1F2327 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2F353C 0%, #1F2327 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #2F353C 0%, #1F2327 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F353C', endColorstr='#1F2327', GradientType=0);
    /* IE6-9 */
    border: 2px solid #1F2327;
    border-radius:...