Dynamic Drive CSS Library- Bold CSS Buttons

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

Bold CSS Buttons

Author: Dynamic Drive

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 (64)

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 4 of 7 pages « First < 2 3 4 5 6 > Last »

This is a response to Scott's question on how to make a form use an image for the submit button.

You simply need to use this code:

<input type="image" src="(the url of the button image)" name="submit" >

and of course, replace the stuff in brackets with the real URL of your image.

It's very simple.

Posted by Braeden on 04/29, 10:25 AM

I had to put the link in a table in order to center it. It does look good, but I don't understand why <center> will not work!! It flashes left unless i put it in the table....mystery!

Posted by PB on 05/04, 06:50 PM

lovely codes and design thank you so much

Posted by Dunya on 05/17, 08:08 PM

Hi iam new to css Actually iwant a button or tag with rounded corners when i moved my mouse over that tab.can any help me in this regard

Thanks in advance
Lokesh.p

Posted by lokesh on 05/22, 08:16 AM

How do I put these buttons in my web page? I am a student and we are learning about CSS. I've tried this several times it hasn't appeared right yet. Can I duplicate them to make five buttons across the top? How?

Posted by Gerald Livingston on 05/22, 10:46 AM

grey oval red button

Posted by Romuald Horbatnik on 05/23, 09:12 AM

to center it put a


<div align="center"> ... </div>

tag around it

Posted by ThomasFN on 05/23, 12:59 PM

Wrong item. lol. can someone delete these please

Posted by ThomasFN on 05/23, 01:01 PM

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

Comment Pages 4 of 7 pages « First < 2 3 4 5 6 > Last »

Commenting is not available in this weblog entry.