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 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
Lokesh.p
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{
font
bold 13px Arial/* Change 13px as desired */
text-decorationunderline;
backgroundtransparent url('images/roundedge-gray-right.gif'no-repeat top right;
displayblock;
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:
a:visited.boldbuttons{
font
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-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.