Created
August 22, 2012 10:24
-
-
Save wooki/3424196 to your computer and use it in GitHub Desktop.
Glass Button in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Original one http://snipplr.com/view/50166/, posted here so I don't lose it! | |
*/ | |
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment