Dynamic Drive CSS Library- Bold CSS Buttons

CSS Library: Links & Buttons: Here

Bold CSS Buttons

These big, bold CSS buttons are constructed using a rounded edge button image sliced into two pieces, then put back together using CSS. The button text style reacts on the "hover" state.

Demo:

Single button:

Dynamic Drive CSS Library

Side by Side:

Download Now CSS buttons

The images used: Choose the desired set to download (2 images total):

Gray oval (2 images):

Blue oval (2 images):

Green button (2 images):

Red button (2 images):

Metallic brown button (2 images):

The CSS:

<style type="text/css">

a.boldbuttons{
background: transparent url('media/roundedge-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('media/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

</style>

Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.

The HTML:

<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="boldbuttons" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>


<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="boldbuttons" href="http://www.dynamicdrive.com/style/csslibrary/category/C7/"><span>Download Now</span></a> <a class="boldbuttons" href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="margin-left: 6px"><span>CSS buttons</span></a>
</div>

Code Info

Rate this code:

Date Posted: 12/08/2007

Revision History: None

Usage Terms: Click here

Your Comments (62)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

fd dfff fff fee fds

Posted by salahzol on 05/26, 08:24 AM

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Posted by salahzol on 05/26, 08:25 AM

I think your CSS won't work well for IE

Given the HTML in IE on HOVER the hover font, line height and padding won't be what is desired.

I believe you need something like this :



a:hover.boldbuttons span{

font: bold 13px Arial; /* Change 13px as desired */

text-decoration: underline;

background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;

display: block;

line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */

padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/

}

Posted by Ed on 05/29, 09:59 PM

Also we might want to consider the a.visited for IE:



a:visited.boldbuttons{

font: bold 13px Arial; /* Change 13px as desired */

line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */

padding-left: 8px; /* Width of left menu image */

}

Posted by Ed on 05/29, 10:29 PM

How could I make this work with IE6 and earlier?

Thanks

Posted by Jose Carrillo on 06/30, 04:14 PM

Thanks for this sleek, clean button!

Posted by Evolved Templates on 07/10, 02:14 PM

I recently used these bold CSS buttons on a website that I am developing for a friend. When accessing the site from certain places, the images behind the button take an observable time to download, resulting in a noticeable white screen between image swaps. I came back to this page to test if it was just my site or if I could reproduce here. Sure enough, the same problem occurs. Furthermore, no other CSS image swapping buttons seem to have this effect. ...just an FYI for those considering to use.

Posted by Kenny on 07/15, 08:48 AM

it is many thanks

Posted by oil painting on 07/23, 04:54 AM

bcvb

Posted by moon on 07/23, 06:37 AM

Good script. If you change the a.boldbuttons span padding from:

padding:4px 10px 4px 2px;

To

padding:4px 11px 4px 2px;

It removes the 1px line gap between the two images on Firefox.

Posted by Talwoasc on 07/30, 09:25 AM

Comment Pages 6 of 7 pages « First < 4 5 6 7 >