Recreating the CTXNA Button Style in Pure CSS

by TimGThomas

HTML

<a href=# onclick='return false'><span>Perform Awesome</span></a>

CSS

body {
    background: #5e5e66;
    margin: 10px;
}

a {
    background: #6b819e;
    background: -moz-linear-gradient(top, #6b819e 0%, #798fad 60%, #5b6c88 61%, #3f4a63 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b819e), color-stop(60%,#798fad), color-stop(61%,#5b6c88), color-stop(100%,#3f4a63));
    background: -webkit-linear-gradient(top, #6b819e 0%,#798fad 60%,#5b6c88 61%,#3f4a63 100%);
    background: -o-linear-gradient(top, #6b819e 0%,#798fad 60%,#5b6c88 61%,#3f4a63 100%);
    background: -ms-linear-gradient(top, #6b819e 0%,#798fad 60%,#5b6c88 61%,#3f4a63 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b819e', endColorstr='#3f4a63',GradientType=0 );
    background: linear-gradient(top, #6b819e 0%,#798fad 60%,#5b6c88 61%,#3f4a63 100%);

    border-radius: 15px;
    box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.5);
    color: #fff;
    display: block;
    float: left;
    font-family: Segoe UI;
    font-size: 14px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #5A5A60;
}

a:hover {
    background: #f58f46;
    background: -moz-linear-gradient(top, #f58f46 0%, #f79f4d 59%, #f3783a 62%, #ef5329 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f58f46), color-stop(59%,#f79f4d), color-stop(62%,#f3783a), color-stop(100%,#ef5329));
    background: -webkit-linear-gradient(top, #f58f46 0%,#f79f4d 59%,#f3783a 62%,#ef5329 100%);
    background: -o-linear-gradient(top, #f58f46 0%,#f79f4d 59%,#f3783a 62%,#ef5329 100%);
    background: -ms-linear-gradient(top, #f58f46 0%,#f79f4d 59%,#f3783a 62%,#ef5329 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f58f46', endColorstr='#ef5329',GradientType=0 );
    background: linear-gradient(top, #f58f46 0%,#f79f4d 59%,#f3783a 62%,#ef5329 100%);
    
    text-shadow: 1px 1px 0 #ef5329;
}

a span {
    border: solid 1px rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: block;
...