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

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.


The image used:

The CSS:


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

this's nice but with some hover effect will be excellent
Posted by Shaon on 06/05, 08:19 PM
Realy great job.
Thanx a lot.
Posted by Yarn on 07/04, 12:56 AM
The second image...
is missing from the "The image used" section.
Posted by MSS on 08/08, 10:19 PM
Nice tip, i thought for so long you couldnt stylise submit buttons.
Posted by Dean on 08/21, 05:07 AM
Great tip, for some reason this wont work in early firefox versions though.

Screen Printing
Posted by John on 08/24, 12:13 AM
hi, i have a form all styled and ready to upload. however, i was wondering what the smtp code would be in order to use, as to encrypt the data when its sent. here is my form:

<form method="POST" action="" onsubmit="">

<h3>Please provide the following contact information:

All red fields are required.</h3>

<table style="border-collapse: collapse">
<td align="right" style="color: #1B1B50; border-top-color: #E2E1FF; border-top-width: 1px; border-bottom-width: 1px; padding-left: 2px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px">
<font color="#FF0000">First Name</font></td>
<td><input type="TEXT" name="Contact_FirstName" size="25"></td>
<td rowspan="8" width="182"> </td>
<td align="right" style="color: #1B1B50; border-top-width: 1px; border-bottom-width: 1px; padding-left: 2px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px">
<font color="#FF0000">Last Name</font></td>
<td><input type="TEXT" name="Contact_LastName" size="25"></td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Title</td>
<td><input type="TEXT" name="Contact_Title" size="35"></td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px"><font color="#FF0000">Organization</font></td>
<td><input type="TEXT" name="Contact_Organization" size="35"></td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Street Address</td>
<td><input type="TEXT" name="Contact_StreetAddress" size="35"></td>
<td align="right" height="29" style="color: #1B1B50; border-bottom-width: 1px">Address (cont.)</td>
<td height="29"><input type="TEXT" name="Contact_Address2" size="35"></td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px"><font color="#FF0000">City</font></td>
<td><input type="TEXT" name="Contact_City" size="35"></td>
<td align="right" height="34" style="color: #1B1B50; border-bottom-width: 1px"><font color="#FF0000">State/Province</font></td>
<td height="34"><input type="TEXT" name="Contact_State" size="35"></td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Zip/Postal Code</td>
<td><input type="TEXT" name="Contact_ZipCode" size="12" maxlength="12"></td>
<td width="182"> </td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Country</td>
<td><input type="TEXT" name="Contact_Country" size="2"></td>
<td width="182"> </td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px"><font color="#FF0000">Work Phone</font></td>
<td><input type="TEXT" name="Contact_WorkPhone" size="25" maxlength="25"></td>
<td width="182"> </td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">FAX</td>
<td><input type="TEXT" name="Contact_FAX" size="25" maxlength="25"></td>
<td width="182"> </td>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px"><font color="#FF0000">E-mail</font></td>
<td><input type="TEXT" name="Contact_Email" size="25"></td>
<td width="182"> </td>
<td align="right" style="color: #1B1B50">URL</td>
<td><input type="TEXT" name="Contact_URL" size="25" maxlength="25" class="test" /><a href="#" class="hintanchor">i.e.</b>', this, event, '200px')">[?]</a>

<td width="182"> </td>



<p><textarea name="Message" rows="5" cols="35" class="test"></textarea><a href="#" class="hintanchor" onmouseover="showhint('Please give a brief description about your organization. <b>i.e</b> <i>Who you are, What you do and, What your looking for.</i>', this, event, '200px')">[?]</a>

Response type:

<input type="RADIO" name="Response" value="Normal" checked> Normal

<input type="RADIO" name="Response" value="Urgent"> Urgent

<input type="RADIO" name="Response" value="Last Chance"> Last Chance

Employment Your Offering:

<input type="CHECKBOX" name="Employment type" value="Permanent"> Permanent

<input type="CHECKBOX" name="Employment type" value="Temporary - Hire"> Temporary - Hire

<input type="CHECKBOX" name="Employment type" value="Seasonal"> Seasonal
<input type="submit" name="submit" value="Submit Form"> <input type="reset" name="reset" value="Clear Form"><br>

Posted by shane on 09/04, 05:44 AM
Thanks for your button css, I was wondering is there any way to maintain the left and right padding of a submit button. I find the more value of a submit button the bigger the padding. Thus "Hello this is a button" will have more left and right padding then a button that says just "Submit" I add my code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Button Test Guinness Drinker</title>
<style type="text/css">
input.btn {
font-family: Tahoma, Arial, Verdana, Monaco, sans-serif;
border:1px solid;
filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,
StartColorStr='#ffffffff', EndColorStr='#ffeeddaa');


<input name="a" type="button" class="btn" id="a" value="Submit">


<input name="b" type="button" class="btn" id="b" value="Hello there">

Posted by Kenny on 09/05, 02:48 AM
Hover i know works in firefox, but im not sure in IE
Posted by craig on 09/25, 10:10 AM
Alternatively, if you're using PHP there are many results in google with tutorials, source code etc. for a captcha feature. Some are very easy to intergrate into your existing website and can be customised colour wise to blend with the design of your site, which i find to be a very attractive proposal - as a designer ;o). -->
Posted by Adaptiv Media on 01/20, 03:45 AM
does it work?
Posted by s. white on 01/31, 11:37 AM

Comment Pages 3 of 8 pages  <  1 2 3 4 5 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.