Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

Side by Side:

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:

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:

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

How could I make this work with IE6 and earlier?

Thanks
Posted by Jose Carrillo on 06/30, 04: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
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
Wow! Cool web 2.0 styled buttons!
Although Richard has a good idea, these buttons look great!
Posted by iwebdir on 08/17, 11:55 AM
I was wondering, buttons work side by side - but when there is an input form it will go below.

is there a fix?
Posted by Cam Bazz on 09/08, 06:38 AM
It would be nice if you included the PSD file used to create the buttons, lets face it one of the button provided will come close to a design we may be using but nothing you post will match the color of our designs 100%, having a PSD would allow the person to modify the image to suite there color scheme...
Posted by Chris on 09/10, 02:30 AM
good

Thanks!
Posted by softcps on 09/19, 09:19 PM
Nice. All such buttons will work with a tag. I wanted to have submit buttons -- input or button tags -- and I've not found a solution to this. Forms won't work if you press enter; you need to click on the links for the form to be processed.

I've tried button tags with span/b inside, but this too seems to have browser issues.
Posted by Diptanshu on 10/02, 07:53 AM
Professional
Posted by كوبرا COBRA on 10/09, 07:30 AM
I have been having difficulty gettting the buttons to display centered also. Any ideas?
Posted by noob2 on 10/09, 10:07 AM

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


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.