CSS Jelly Buttons

by clawfire

HTML

<h1>CSS Jelly Buttons</h1>

<button id="blue">Add Comment</button>
<button id="pink">Add Comment</button>
<button id="orange">Add Comment</button>

<br />

<small>By, Jordan Adams
    <br />
    <a href="http://www.twitter.com/jordancalluma">@JordanCallumA</a>
</small>

CSS

body {
    background: #EEE;
    margin: 0;
    padding: 50px 0px;
    text-align: center;
    font-family: arial;
    font-size: 10pt;
    color: #666;
}

button {
    padding: 5px 8px;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25);
    -moz-text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5),
                inset 0px 0px 10px rgba(0, 0, 0, 0.1),
                0px 1px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5),
                        inset 0px 0px 10px rgba(0, 0, 0, 0.1),
                        0px 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5),
                     inset 0px 0px 10px rgba(0, 0, 0, 0.1),
                     0px 1px 5px rgba(0, 0, 0, 0.25);
    margin: 20px 10px;
}

#pink {
    background: #FF638A;
    border: solid 1px #A63854;
}

#blue {
    background: #5794FF;
    border: solid 1px #3860A6;
}

#orange {
    background: #FF8B38;
    border: solid 1px #A65A24;
}




h1 {
    font-weight: bold;
    text-shadow: 1px 1px 0px #FFF;
    -moz-text-shadow: 1px 1px 0px #FFF;
}

small {
    font-style: italic;
    font-size: 8pt;
    text-shadow: 1px 1px 0px #FFF;
    -moz-text-shadow: 1px 1px 0px #FFF;
}

small a:link {
    color: #777;
    text-decoration: none;
}

small a:visited {
    color: #777;
    text-decoration: none;
}

small a:hover {
    color: #777;
    text-decoration: underline;
}

small a:active {
    color: #777;
    text-decoration: underline;
}