Playing around with CSS3 and Webkit styles to produce an extensible, graphics-free "3D" button.
a {
color: #333;
text-decoration: none;
}
h3 {
display: block;
color: #333;
font-size: 1.2em;
letter-spacing: -0.055em;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
margin-top: 40px;
clear: both;
}
#container {
margin: 100px auto;
width: 400px;
}
#container p {
font-size: 1em;
max-width: 22em;
line-height: 1.5em;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
a.special_button {
display: inline-block;
position: relative;
top: -3px;
font-size: 1.2em;
padding: 0.8em 1.5em 0.9em;
border-radius: 12px;
text-shadow: 0 0 2px #fff;
border: 1px solid rgba(255,255,255,0.3);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.17, rgb(217,217,217)),
color-stop(0.59, rgb(240,240,240)),
color-stop(0.8, rgb(245,245,245))
);
}
a.special_button:active {
top: 0;
-webkit-box-shadow: inset 0 3px 2px rgba(0,0,0,0.4),
inset 0 -2px 2px rgba(0,0,0,0.1),
inset 0 2px 0 rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.2);
border-style: inset;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.8, rgb(245,245,245)),
color-stop(0.69, rgb(240,240,240)),
color-stop(0.17, rgb(225,225,225))
);
}
.link_shadow {
position: relative;
overflow: visible;
display: block;
padding: 0;
float: left;
background: #444;
border-radius: 13px;
margin-bottom: 40px;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.05);
}
.link_shadow:hover { -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.15), 0 0 8px rgba(255,255,255,0.4); }