Design Css Form Submit Button

admin On April - 13 - 2011

In this tutorial we are going to design the form Submit Button, changing the border color, add square borders, adding gradient background to button…

Lets start the Begining: Design 1

First of all we have to create the form and Submit Button in html, Copy & Paste the below code in your <body> tag of your html file:

<form>
<input class="design1" type="submit" value="Submit"   />
</form>

Styling the “design1″ Submit Button

Okay, now we are going to design the “class=’design1′” Submit Button, copy and paste the below code in your <head> tag of your html file or in you “.css” file:

.design1{
background-color:#fffff;
border:1px solid #dbdbdb;
padding:5px;
}

background-color: This is used for changing the background color of the Submit Button.
border: This is used for changing the border color of the Submit Button.

Your Design 1 will be look like this

Example

Design 2

Html code for Design 2:

<form> <input class="design2" type="submit" value="Submit"   />
</form>

Styling the “design2″ Submit Button

Css code for “class=’design2′” Submit Button:

.design2{
background-color:#fffff;
border:1px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}

background-color: This is used for changing the background color of the Submit Button.
border: This is used for changing the border color of the Submit Button.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 2 will be look like this

Example

Design 3

Html code for Design 3:

<form> <input class="design3" type="submit" value="Submit"   />

</form>

Styling the “design3″ Submit Button

Css code for “class=’design3′” Submit Button:

.design3{
background-color:#f0f0f0;
border:1px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
color: #000;
font-style:italic;
font-weight:bold;
}

background-color: This is used for changing the background color of the Submit Button.
border: This is used for changing the border color of the Submit Button.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 3 will be look like this

Example

Design 4

Html code for Design 4:

<form> <input class="design4" type="submit" value="Submit"   />

</form>

Styling the “design4″ Submit Button

Css code for “class=’design4′” Submit Button:

.design4{
background-color:#fffff;
border:2px solid #dbdbdb;
padding:5px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
color: #093;
font-weight:bold;
font-style:italic;
}

Your Design 4 will be look like this

Example

Design 5

Html code for Design 5:


<form> <input class="design5" type="submit" value="Submit"   />

</form>

Styling the “design5″ Submit Button

Css code for “class=’design5′” Submit Button:

.design5{
background-color:#fffff;
border:2px solid #dbdbdb;
padding:5px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-weight:bold;
font-style:italic;
}

Your Design 5 will be look like this

Example

Design 6

Html code for Design 6:

<form> <input class="design6" type="submit" value="Submit"   />

</form>

Styling the “design6″ Submit Button

Css code for “class=’design6′” Submit Button:

.design6{
background-color:#eeeeee;
border:2px solid #999;
padding:5px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 6 will be look like this

Example

Design 7

Html code for Design 7:

<form> <input class="design7" type="submit" value="Submit"   />

</form>

Styling the “design7″ Submit Button

Css code for “class=’design7′” Submit Button:

.design7{
background-color:#eeeeee;
border-top:2px solid #dbdbdb;
border-right:2px solid #dbdbdb;
border-bottom:4px solid #ccc8cc;
border-left:2px solid #dbdbdb;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

background-color: This is used for changing the background color of the Submit Button.
border: This is used for changing the border color and border size of the Submit Button.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.

Your Design 7 will be look like this

Example

Design 8

Html code for Design 8:

<form> <input class="design8" type="submit" value="Submit"   />

</form>

Styling the “design8″ Submit Button

Css code for “class=’design8′” Submit Button:

.design8{
background-color:#eeeeee;
border-top:2px solid #dbdbdb;
border-right:2px solid #dbdbdb;
border-bottom:4px solid #ccc8cc;
border-left:2px solid #dbdbdb;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 8 will be look like this

Example

Design 9

Html code for Design 9:

<form> <input class="design9" type="submit" value="Submit"   />

</form>

Styling the “design9″ Submit Button

Css code for “class=’design9′” Submit Button:

.design9{
background-color:#eeeeee;
border-top:1px solid #dbdbdb;
border-right:1px solid #dbdbdb;
border-bottom:1px solid #dbdbdb;
border-left:11px solid #ccc8cc;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 9 will be look like this

Example

Design 10

Html code for Design 10:

<form> <input class="design10" type="submit" value="Submit"   />

</form>

Styling the “design10″ Submit Button

Css code for “class=’design10′” Submit Button:

.design10{
background-color:#eeeeee;
border-top:1px solid #060;
border-right:1px solid #060;
border-bottom:1px solid #060;
border-left:11px solid #060;
padding:5px;
color: #666;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 10 will be look like this

Example

Design 11

Html code for Design 11:


<form> <input class="design11" type="submit" value="Submit"   />

</form>

Styling the “design11″ Submit Button

Now we are going to add a gradient color background in Submit Button, click here to view the bg and save it to your computer!
Css code for “class=’design11′” Submit Button:

.design11{
background-image:url(gradient1.png);
border:1px solid #85c2de;
padding:9px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-size:15px;
font-weight:bold;
color: #333;
}

background-image: This is used for adding background image to the Submit Button.
border: This is used for changing the border color of the Submit Button.
font-style: This is used for changing the font style to Italic.
font-weight: This is used for changing the font weight to Bold.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and”-moz-border-radius” is used for Mozilla equivalent

Your Design 11 will be look like this

Example

Design 12

Html code for Design 12:

<form> <input class="design12" type="submit" value="Submit"   />

</form>

Styling the “design12″ Submit Button

Now we are going to add a gradient color background in Submit Button, click here to view the bg and save it to your computer!
Css code for “class=’design12′” Submit Button:

.design12{
background-image:url(gradient2.png);
border:1px solid #88de85;
padding:9px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-size:15px;
font-weight:bold;
color: #333;
}

Your Design 12 will be look like this

Example

Design 13

Html code for Design 13:

<form> <input class="design13" type="submit" value="Submit"   />

</form>

Styling the “design13″ Submit Button

Now we are going to add a gradient color background in Submit Button, click here to view the bg and save it to your computer!
Css code for “class=’design13′” Submit Button:

.design13{
background-image:url(gradient2.png);
border:2px solid #88de85;
padding:9px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
color: #093;
font-size:15px;
font-weight:bold;
font-style:italic;
}

Your Design 13 will be look like this

Example

Design 14

Html code for Design 14:

<form> <input class="design14" type="submit" value="Submit" />

</form>

Styling the “design14″ Submit Button

Now we are going to add a icon in Submit Button, click here to view the icon and save it to your computer!
Css code for “class=’design14′” Submit Button:

.design13{
background-image:url(submit.png);
	background-position:8px;
	background-repeat:no-repeat;
	border:2px solid #CCC;
	padding:9px 0 9px 38px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	font-size:15px;
	font-weight:bold;
	color: #333;
}

Your Design 14 will be look like this

Example

Demo is Available

Click here to view the demo!

One Response so far.

Creating CSS3 Buttons: Techniques, Tutorials, Tools | Splashnology says:

May 26, 2011 at 3:30 pm

[...] Design CSS Form Submit Button [...]

Reply

Css Tutorials

Everything Css Tutorials