CSS Button Pair

by secretgspot

HTML

<div class="buttons">
    <a href="#">Project Details</a>
    <p>or</p>
    <a href="#">View Portfolio</a>
</div>

CSS

body {
    background: #1c1e20;
    font: 14px/36px sans-serif;
    padding: 100px;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.6);
    -webkit-font-smoothing: antialiased;
}
.buttons a {
    background: #5d9eb5;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.1),
                inset 0 1px 0px hsla(0,0%,100%,.3),
                inset 0 -15px 20px hsla(0,0%,0%,.15);
    color: #f6f6f6;
    float: left;
    font-weight: bold;
    height: 36px;
    text-align: center;
    text-decoration: none;
    width: 150px;
}
.buttons a:first-child {
    background: #e15034;
    border-radius: 5px 0 0 5px;
}
.buttons a:hover,
.buttons a:focus {
    box-shadow: 0 1px 1px hsla(0,0%,100%,.1),
                inset 0 1px 0px hsla(0,0%,100%,.3),
                inset 0 -15px 20px hsla(0,0%,0%,.15),
                inset 0 0 25px 25px hsla(0,0%,100%,.25);
}
.buttons a:active {
    box-shadow: 0 1px 1px hsla(0,0%,100%,.1),
                inset 0 2px 15px hsla(0,0%,0%,.25),
                inset 0 1px 1px hsla(0,0%,0%,.5),
                inset 0 -15px 20px hsla(0,0%,0%,.15);
    line-height: 38px;
}
.buttons p {
    background: #1c1e20;
    border-radius: 25px;
    color: #f6f6f6;
    float: left;
    font-size: 10px;
    line-height: 18px;
    margin: 9px -7px;
    padding-right: 1px;
    position: relative;
    text-align: center;
    width: 17px;
    z-index: 10;
}

JavaScript

// http://dribbble.com/shots/299659-Fixel-Buttons