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

This is a response to Scott's question on how to make a form use an image for the submit button.

You simply need to use this code:

<input type="image" src="(the url of the button image)" name="submit" >

and of course, replace the stuff in brackets with the real URL of your image.

It's very simple.
Posted by Braeden on 04/29, 10:25 AM
I had to put the link in a table in order to center it. It does look good, but I don't understand why <center> will not work!! It flashes left unless i put it in the table....mystery!
Posted by PB on 05/04, 06:50 PM
lovely codes and design thank you so much
Posted by Dunya on 05/17, 08:08 PM
Hi iam new to css Actually iwant a button or tag with rounded corners when i moved my mouse over that tab.can any help me in this regard

Thanks in advance
Posted by lokesh on 05/22, 08:16 AM
How do I put these buttons in my web page? I am a student and we are learning about CSS. I've tried this several times it hasn't appeared right yet. Can I duplicate them to make five buttons across the top? How?
Posted by Gerald Livingston on 05/22, 10:46 AM
grey oval red button
Posted by Romuald Horbatnik on 05/23, 09:12 AM
to center it put a
<div align="center"> ... </div
tag around it
Posted by ThomasFN on 05/23, 12:59 PM
Wrong item. lol. can someone delete these please
Posted by ThomasFN on 05/23, 01:01 PM
I think your CSS won't work well for IE

Given the HTML in IE on HOVER the hover font, line height and padding won't be what is desired.

I believe you need something like this :

a:hover.boldbuttons span{
bold 13px Arial/* Change 13px as desired */
backgroundtransparent url('images/roundedge-gray-right.gif'no-repeat top right;
line-height22px/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
padding4px 10px 4px 2px/*Set 10px to be equal or greater than'padding-left' value above*/
Posted by Ed on 05/29, 09:59 PM
Also we might want to consider the a.visited for IE:
bold 13px Arial/* Change 13px as desired */
line-height22px/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
padding-left8px/* Width of left menu image */
Posted by Ed on 05/29, 10:29 PM

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