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

dear p_merc,

Make PNG or transparant GIF buttons or make the "background" of the image same colour as the background colour of the page.

Tip in general:
use image preloading to avoid flicker on first mouse over:

http://www.haan.net/test/preloader1.php

Posted by Senior Internet and website design consultant on 01/03, 09:05 AM

Thank. you. very. much, I will. use it..

Posted by kayek on 02/03, 10:42 AM

It is a very appreciate work

Posted by Bhogendra on 02/27, 12:06 AM

ok i am trying to get this code to work but it dosent and its makein me mad

i try to make the image show up and i dont cuz it dosent hav a img src and i bnt know where to put it at

please help me thank you

Posted by Hangman on 02/27, 06:36 AM

I know this is a silly question, but how do I work this code???? Where do I insert the HTML, and save the pictures?

Posted by Ezekiel on 03/03, 02:53 AM

home about us

Posted by sanjeet on 03/11, 05:26 AM

that is exactly what i need.
thanks...

Posted by petnos on 03/13, 06:12 AM

How can I make the button at a constant width? It appears as though the button is justify to the title of the button. Any ideas?

Posted by Ottster on 03/31, 01:28 PM

I've figured it out, in the .css just add width: 145; for each of the line that have background: url in int.

Posted by ottster on 03/31, 01:34 PM

These type of buttons make great bold links for things like "Read More" on your blog or news site.

Thanks for the resource.

Posted by CommerceStyle.com on 04/03, 06:07 AM

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.