body {
    background: #A7A9AC;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(.34, rgba(230,237,241,.05)),
        color-stop(.67, rgba(230,237,241,0)));
    -webkit-background-size: 5px 5px;
}

.button {
    display: inline-block;
    margin: 0 auto;

    -webkit-border-radius: 10px;

    -webkit-box-shadow:
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
}

.button span {
    background-color: #E8E8E8;

    background-image:
        /* gloss gradient */
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(50%,rgba(255,255,255,0)),
            color-stop(50%,rgba(255,255,255,0.3)),
            color-stop(100%,rgba(255,255,255,0.2))),

        /* dark outside gradient */
        -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0%,rgba(210,210,210,0.3)),
            color-stop(20%,rgba(210,210,210,0)),
            color-stop(80%,rgba(210,210,210,0)),
            color-stop(100%,rgba(210,210,210,0.3))),

        /* light inner gradient */
        -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0%,rgba(255,255,255,0)),
            color-stop(20%,rgba(255,255,255,0.5)),
            color-stop(80%,rgba(255,255,255,0.5)),
            color-stop(100%,rgba(255,255,255,0))),

        /* diagonal line pattern */
        -webkit-gradient(
            linear,
            0% 100%,
            100% 0%,
            color-stop(0%,rgba(255,255,255,0)),
            color-stop(40%,rgba(255,255,255,0)),
            color-stop(40%,#D2D2D1),
            color-stop(60%,#D2D2D1),
            color-stop(60%,rgba(255,255,255,0)),
            color-stop(100%,rgba(255,255,255,0)));

        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 4px 4px;

    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;

    display: inline-block;
    padding: 10px 40px 10px 40px;

    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    width: 200px;
    height: 150px;
    display: table-cell;
vertical-align: middle;

    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

        .button span:hover {
            color: #AEBF3B;
            text-shadow: 0px -1px #97A63A;
            cursor: pointer;
        }

        .button:active {
            -webkit-box-shadow:
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .button:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }