Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
CSS Library
CSS Layouts

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.


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.


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:
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.
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 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.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.