Rounded Cutout v1

Using CSS ONLY to created 3D cutouts.

by Robert Herring

HTML

<body>
    <div class="wrapper">
        <div class="bg"></div>
        <div class="outerbutton">
            <div class="innerbutton"><span>Appointment</span>
            </div>
        </div>
        <div class="shadow">
            <div class="shadowbox"></div>
            <div class="shadowbutton"></div>
        </div>
    </div>
</body>

CSS

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

body {
    height:600px;
    width:100%;
    background: #416e9a;
    /* Old browsers */
    background: -moz-linear-gradient(top, #416e9a 0%, #5490c4 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #416e9a), color-stop(100%, #5490c4));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #416e9a 0%, #5490c4 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #416e9a 0%, #5490c4 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #416e9a 0%, #5490c4 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #416e9a 0%, #5490c4 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#416e9a', endColorstr='#5490c4', GradientType=0);
    /* IE6-9 */
}
.bg {
    height: 150px;
    width: 100%;
    background: #EFEFEF url('http://www.isbeingdesigned.com/images/diag.png') 0 0 repeat fixed;
}
.outerbutton {
    width: 200px;
    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 span {
    width:192px;
    margin: 11px auto;
    font-family:Arial, Helvetica, sans-serif;
    text-shadow: 0px 0px 10px #000;
    text-transform:uppercase;
    color: #fff;
    text-align:center;
    float:left;
}
.innerbutton {
    width: 192px;
    height: 42px;
    margin: 2px;
    background: #4096ee;
    /* Old browsers */
    background: -moz-linear-gradient(top, #4096ee 0%, #416e9a 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4096ee), color-stop(100%, #416e9a));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4096ee 0%, #416e9a 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4096ee 0%, #416e9a 100%);
    /* Opera 11.10+ */
...