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


Vipin- Web Designers in India
Posted by Vipin from India on 01/14, 04:09 AM
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
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-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.