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 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...
http://www.dynamicdrive.com/cssexamples/media/formbg2.gif
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 mailto:someone@somwhere.com, as to encrypt the data when its sent. here is my form:

<form method="POST" action="mailto:someone@somwhere.com" onsubmit="">

<h3>Please provide the following contact information:

All red fields are required.</h3>

<table style="border-collapse: collapse">
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Title</td>
<td><input type="TEXT" name="Contact_Title" size="35"></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td align="right" style="color: #1B1B50; border-bottom-width: 1px">Street Address</td>
<td><input type="TEXT" name="Contact_StreetAddress" size="35"></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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> http://www.mycompany.com.', this, event, '200px')">[?]</a>

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

</div>

Message.</pre>

<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>

</form>
Posted by shane on 09/04, 05:44 AM
Hello,
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" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Button Test Guinness Drinker</title>
<style type="text/css">
<!--
input.btn {
color:#050;
font-family: Tahoma, Arial, Verdana, Monaco, sans-serif;
font-size:10px;
font-weight:bold;
background-color:#fed;
cursor:pointer;
border:1px solid;
border-top-color:#B2876A;
border-left-color:#B2876A;
border-right-color:#B2876A;
border-bottom-color:#B2876A;
padding-left:1px;
padding-right:1px;
filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,
StartColorStr='#ffffffff', EndColorStr='#ffeeddaa');
}
-->
</style>
</head>

<body>

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

 

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

</body>
</html>
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). --> http://www.google.com/search?q=php+captcha&rls=com.microsoft:en-gb:IE-SearchBox&ie=UTF-8&oe=UTF-8&sourceid=ie7&rlz=1I7GGIH
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-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.