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

Hi
I'd like to find out what you use to generate your captcha images. I'm about to open up a page for newsletter signups and a few other things that I'd like to protect with a captcha image check.
Thanks
Tom
Posted by Tom Chambers on 05/09, 07:39 AM
Hi

Just to clarify that this effect doesn't work with Safari, you just get the basic aqua button.
cheers,
Dan
Posted by Dan Hilton on 05/09, 08:45 AM
Very nice. I'm using it on my site.
Posted by Slob Jones on 05/19, 02:34 PM
Also, in Camino you get a standard aqua button but with bold text.
Posted by computerdude33 on 05/24, 03:43 PM
I can create a div that pops up by clicking on an empty link. This div contains input fields (radio buttons, text box, and drop down list)

I would like to be able to make selections in these inputs and then dismiss this div (or move it off the screen) when the user is done.

I can do the first part... any ideas on the second part? Let me know if you need something to get started or if you can create your own popup div maybe yours will be better anyway.
Posted by Tor on 06/01, 04:26 PM
Great entry. Love to see more stuff on styling form elements.
Posted by Jamie Wilkinson on 06/02, 10:29 AM
Hi, thanks, great css. Is it possible to have the same button effect but with curved corners?
Posted by Michael McGettigan on 07/06, 10:14 AM
@ Tom: If you are using asp check out
http://www.codeproject.com/aspnet/CaptchaImage.asp
for integrating captcha images into your web forms.
Posted by Dafin on 07/10, 08:39 AM
thanks, indeed a good tutorial but what about hover effect in submit button? does hover works in IE as well

input [type=submit]
{
............
}

input:hover[type=submit]
{
............
}
Posted by freemind on 08/01, 04:03 AM
sorry im new with css but im using dreamweaver 8 i need to no where you paste the css code in the coder section of dreamweaver??
Posted by lucas on 08/28, 11:35 PM

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