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

http://www.bddesignzone.com
web design company
Posted by bddesignzone on 10/25, 12:51 AM
This technique can't be used on a submit button (I mean <input type="submit"....). For that you must create a button with javascript code to perform a "submit".
Posted by Bob Bedford on 10/31, 03:49 AM
cool buttons
Posted by Alex on 11/03, 02:30 AM
I want to know if its possible to put something like this on a website form. Like Scott wants it.

Is it possible to use it for SUBMIT Button.

Thanks

Vipin- Web Designers in India
Posted by Vipin from India on 01/14, 04:09 AM
Giris
Posted by GiRiS on 02/04, 10:31 AM
I used to use these buttons on the previous version of the site Restaurante Japonês Manekineko.
Posted by Manekineko on 02/19, 08:25 AM
thanks for submitting useful tutorial
Posted by amol on 03/30, 05:39 AM
Best web Development Company
Posted by Rassel hawlader on 03/31, 08:20 AM
super
Posted by turkay on 04/10, 01:00 PM
hi, whats up wit u, hope u cool,this script work so well i love it love it.
Posted by kolade on 05/19, 06:32 AM

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