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

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 6 pages « First < 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

i bookmark this web . i like this

Posted by ian on 01/10, 07:57 PM

fhfg bhtfgh

Posted by car cars on 01/12, 06:19 PM

moi abd ali

Posted by abd ali on 01/27, 05:38 AM

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

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

Thanks for this button code. I'm new to CSS so I'm sure something I'm doing is wrong. I made a test html combined with the css and that works fine. However, when I try to use an external css with this code using the proper css link syntax within the head section, the buttons are thrown all the way to the right side of the page and the roundedge-gray-left button graphic is missing. I'm usiung IE7. What am I doing wrong?

Posted by Ikaros on 02/09, 10:17 PM

^^^ Never mind - the external css file had the beginning and ending "style" HTML code in it. I removed them and now the external file works properly. Trail and error for a beginner css student!

Posted by Ikaros on 02/09, 10:35 PM

hello

Posted by hello on 02/21, 12:06 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

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