Here’s some CSS buttons.
These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.
Shrink-wrapped buttons
Shrink-wrapped buttons
Shrink-wrapped buttons
..and a final one!
Here’s the code:
a.btn,
a.btn:visited {
float:left;
background-color: #80c64c;
background-image: url(/images/blog/btn.png);
color:#fff;
text-decoration:none;
font-size:0.95em;
clear:both;
margin:0 0 12px 6px;
line-height: 1.1;
letter-spacing: 0;
}
a:hover.btn {
color:#ff0;
}
a.btn * {
display:block;
font-weight:normal;
}
a.btn b {
margin-left:6px;
padding:2px 0 0 0;
background: transparent url(/images/blog/btn.png) right top;
}
a.btn b b {
margin:0 0 0 -6px;
padding:0 0 0 12px;
background-position: left bottom;
}
a.btn b b b {
padding:6px 12px 12px 0px;
margin: 0;
background-position: right bottom;
text-indent: -3px;
}
a.btn_grn,
a.btn_grn:visited {
background-color: #80c64c;
}
a.btn_grn b b b b {
padding: 0 28px 0 0;
background-image: url(/images/blog/arrows.png);
background-position: right center;
background-repeat: no-repeat;
}
<a class="btn" href="#nogo">
<b><b><b>Shrink-wrapped buttons</b></b></b>
</a>
<a class="btn_grn btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>
<a class="btn_grn2 btn" href="#nogo">
<b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>
<a class="btn_brwn btn" href="#nogo">
<b><b><b>..and a final one!</b></b></b>
</a>
This is an adaption to the work done by:
schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons