Revision: 42546
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 7, 2011 00:33 by Keliah
Initial Code
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);
}
Initial URL
Initial Description
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>
Initial Title
CSS3 Glass Button
Initial Tags
button, CSS3
Initial Language
CSS