css fancy round buttons

by dshilkret

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<button ><i class="icon-twitter"></i></button>
<button ><i class="icon-youtube"></i></button>
<button ><i class="icon-facebook"></i></button>
<button ><i class="icon">Debug</i></button>

CSS

button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(120deg, transparent, black 40%),
 -webkit-radial-gradient(50% 50%, ellipse farthest-side, #000, #000 80%, #fff 86%, #fff 94%, #000 97%, #000 99%, transparent 100%) ;
    border: none;
    color: #fff;
    position: relative;
    box-shadow: 0px 0px 1px black;
    cursor: pointer;
    outline: none;
}
button:before {
    content: '';
    position: absolute;
    top: 80%; left: 0px; right: 0px; bottom: -10%;
    background: -webkit-radial-gradient(50% 50%, ellipse farthest-side, black, transparent);
    border-radius: 50%;
    z-index: -1;
}
button i {
     font-size: 3em;   
    text-shadow: 0px 0px 7px rgba(255,255,255,0.5);
}
button:hover {
    background: linear-gradient(120deg, transparent, black 30%),
 -webkit-radial-gradient(50% 50%, ellipse farthest-side, #000, #000 80%, #fff 86%, #fff 94%, #000 97%, #000 99%, transparent 100%) ;
}
button:hover i {
    text-shadow: 0px 0px 7px rgba(255,255,255,0.8);   
}