JSFiddle - React, Tailwind, and code Playground

CSS Button Pair

by Jennifer Perrin

HTML

<div class="buttons">
    <a href="#">View Demo</a>
    <p>or</p>
    <a href="#">Download Files</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
    background: #444 url(http://jenniferperrin.com/image/background.gif) 0 0 repeat;
    font: 17px/36px 'Yanone Kaffeesatz';
    padding: 50px;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.6);
    -webkit-font-smoothing: antialiased;
}
.buttons a {
    background: #617797;
    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;
    letter-spacing: 1px;
    height: 36px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 150px;
}
.buttons a:first-child {
    background: #ad4625;
    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: #222;
    border-radius: 25px;
    color: #f6f6f6;
    float: left;
    font-size: 10px;
    line-height: 18px;
    margin: 9px -7px;
    position: relative;
    text-align: center;
    padding-left: 1px;
    letter-spacing: 1px;
    width: 17px;
    z-index: 10;
}