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