Buttons

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="#">
    <b><b><b>Shrink-wrapped buttons</b></b></b>
</a>

<a class="btn_grn btn" href="#">
    <b><b><b><b>Shrink-wrapped buttons<b></b></b></b>
</a>

<a class="btn_grn2 btn" href="#">
   <b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>

<a class="btn_brwn btn" href="#">
    <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

Add a comment

Leave a Comment

Your email address will not be published.