Posted By

Keliah on 03/07/11

Tagged

button
CSS3

Versions (?)

Last Edited at 03/07/11 12:33am

Statistics

Viewed 966 times

Favorited by 0 user(s)

Related snippets

CSS3 Glass Button

/ Published in: CSS

CSS3 button with a transparent glass effect (looks better on a textured background). A snapshot can be seen <a href="http://demos.pixelworkshop.fr/misc/css_button.jpg">Here</a>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

a.button {
 
    font-family: 'PT Sans', arial, serif;
    color:#ffffff;
    text-align:center;
    font-size:24px;
    font-weight:bold;
 
    padding:10px;
 
    text-shadow: /* Simulating Text Stroke */
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000;
 
    border: 1px solid rgba(0,0,0,0.5);
    border-bottom: 3px solid rgba(0,0,0,0.5);
 
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
 
    background: rgba(0,0,0,0.25);
 
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
 
    -o-box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);
 
    -webkit-box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);
 
    -moz-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);
 
}