Klairvoyant infosolution's Blog

CSS Buttons

john

1) in css file

.button, .button:visited{
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.small.button, .small.button:visited{ font-size: 11px}
.button, .button:visited,.medium.button, .medium.button:visited
{
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited
{
font-size: 14px;
padding: 8px 14px 9px;
}
.super.button, .super.button:visited
{
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.button, .pink.button:visited{ background-color: #6b32b2; }
.pink.button:hover{ background-color: #44177c; }

2)
<a class=”super button pink”>Pink Button</a>
<a class=”large button pink>Pink Button</a>

3) download overlay.png  from the source

Source

http://papermashup.com/pretty-css3-buttons/