glossy buttons

glossy buttons

by george_black

HTML

<div class="container"> <a href="#" class="button">Submit</a>
 <a href="#" class="button button-green">Submit</a>
 <a href="#" class="button button-red">Submit</a>

</div>

CSS

/*
 * Copyright (c) 2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * View the Sass/SCSS source at:
 * http://www.cssflow.com/snippets/glossy-buttons/demo/scss
 *
 * Original PSD by Alex Montague: http://goo.gl/tsyNM
 */
 @import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
 html, body {
    min-height: 100%;
}
body {
    font: 12px/20px'Lucida Grande', Verdana, sans-serif;
    color: #404040;
    background: #92c7d6;
    background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
    background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
    background-image: -o-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
    background-image: radial-gradient(top, circle cover, #97d0e1, #427388 80%);
}
.container {
    width: 550px;
    margin: 80px auto;
    text-align: center;
}
.container > .button {
    margin: 0 10px;
}
.button {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    min-width: 96px;
    line-height: 46px;
    padding: 0 24px;
    font-size: 14px;
    color: white;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px #154c86;
    background-color: #247edd;
    background-clip: padding-box;
    border: 1px solid;
    border-color: #1c65b2 #18589c #18589c;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
    background-image: -o-linear-gradient(top, rgba(255, 255,...