Sexy CSS UI Kit v2.2

by secretgspot

HTML

<a href="#">Sexy Button</a>

<input type="checkbox" checked>

<input type="range">

CSS

body {
    background-color: #444;
    background-image: -webkit-radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                      -webkit-radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                      -webkit-radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%),
                      -webkit-radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%);
    background-image:    -moz-radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                         -moz-radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                         -moz-radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%),
                         -moz-radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%);
    background-image:         radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                              radial-gradient(hsla(0,0%,0%,.3) 15%, transparent 16%),
                              radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%),
                              radial-gradient(hsla(0,0%,100%,.1) 15%, transparent 20%);
    background-position: 0 0, 8px 8px, 0 1px, 8px 9px;
    background-size:16px 16px;
    margin: 50px auto;
    padding: 50px;
    width: 600px;
}

/* Button */

a {
    background-color: #222;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:         linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    border: 1px solid #111;
    color: #c6c6c6;
    float: left;
    font: bold 14px/30px sans-serif;
    height: 30px;
    margin: 10px 20px;
    outline: none;
    padding: 0 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
   ...

JavaScript

// http://joshuanhibbert.com