Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Form CSS: Here

Stylish submit buttons

Author: Dynamic Drive

Most people would agree the default look of submit buttons is rather dull and unattractive. Using CSS and a nice gradient background image, it's easy to transform a form button from a duck to a swan.

Demo:



The image used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/03/2006

Revision History: None

Usage Terms: Click here

Your Comments (71)

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 2 of 8 pages  <  1 2 3 4 >  Last »

why 2 row to set the background. The 2nd overwrites the first one. Should be background: #999 url(media/formbg.gif) repeat-x left top;

for freemind: hover on the input element doesn't work in IE. Much use some JavaScript or other workaround
Posted by sido on 11/01, 07:44 AM
Nothing special!!!
Posted by benny on 12/13, 12:32 PM
I couldn't agree with benny, this is very special style for a CSS beginers.
Posted by Atul on 12/15, 02:08 AM
nice one..
Posted by Moe on 12/21, 01:05 PM
Nothin speical. It's really simple CSS

btw, if you like anime check out: http://nexanime.co.nr
Posted by Ty on 12/31, 09:07 PM
Yes you can have curved corners but it requires a curved corner image...

how do u get the hover effect to work?
Posted by Rockonmetal on 03/27, 08:52 PM
buttons don't have the same size in IE6 and Firefox 2.0
Posted by Name on 05/27, 12:25 AM
This is a good CSS for button, but a button should have an effect of button like the way this "Add a comment" Submit button has.
Posted by Neeraj on 05/31, 05:26 AM
Brilliant Code Loved It
Posted by Amanda on 05/31, 03:02 PM
this's nice. but if the button with some hover effect will be excellent. like:
.formbutton:hover{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(media/formbg_hover.gif) repeat-x left top;
}
Posted by Shaon on 06/05, 08:16 PM

Comment Pages 2 of 8 pages  <  1 2 3 4 >  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.