CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features.

Today i am going to share 5 CSS3 Submit Buttons to beautify web pages without using any image. I will use following advanced CSS3 properties (Vendor Specific Extensions) to create these beautiful CSS3 submit buttons. I will recommend to have some time on these links to enhance your knowledge and sharpen your concepts.

Browser Compatibility

I have tested code snippets of CSS3 submit button in the following five browsers.

  1. Mozilla Firefox – 3.6.14 : Excellent
  2. Google Chrome – 9.0 : Excellent
  3. Safari – 5.0.3 : Excellent
  4. Opera 11.01 : Good
  5. Internet Explorer 8 : Poor

Let’s have a look at the new vision of CSS3 to enter our web buttons to the next generation which is fast, reliable and gorgeous.

CSS3 Submit Button 1

CSS3 Submit Button 1

This button can be created by using text shadow, border radius and box shadow. Here is code snippet for this button.

<style>

/**
Button 1
*/

.button1 {

	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: #FFF;
	padding: 5px 10px 5px 10px;
	border: solid 1px #CCC;

	background: #ba4742;
	text-shadow: 0px 1px 0px #000;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	box-shadow: 0 1px 3px #111;
	-moz-box-shadow: 3px 3px 1px #999;
	-webkit-box-shadow: 3px 3px 1px #999;

	cursor: pointer;

}
.button1:hover {
	background: #a33f3a;
}
</style>

<form>
  <input type="submit" name="submit1" value="Submit" class="button1" />
</form>

CSS3 Submit Button 2

CSS3 Submit Button 2

This button can be created by using text shadow, border radius and background gradient. Here is code snippet for this button.

<style>

/**
Button 2
*/

.button2 {

	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: #FFF;
	padding: 5px 10px 5px 10px;
	border: 1px solid #999;

	text-shadow: 0px 1px 1px #000;
	text-decoration: none;

	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;

	background: #0060df;
	background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
	background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );

	cursor: pointer;

}
.button2:hover {
	background: -moz-linear-gradient(90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
	background: -webkit-gradient(linear, left bottom, left top, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78e2ff', endColorstr='#3944a8', GradientType=0 );
}

</style>

<form>
  <input type="submit" name="submit1" value="Submit" class="button2" />
</form>

CSS3 Submit Button 3

CSS3 Submit Button 3

This button can be created by using text shadow, border radius and background linear gradient. Here is code snippet for this button.

<style>

/**
Button 3
*/

.button3 {

	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: #000;
	padding: 5px 10px 5px 10px;
	border: 1px solid #999;

	text-shadow: 0px 1px 1px #FFF;
	text-decoration: none;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	background: #ffcc66;
	background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );

	cursor: pointer;

}
.button3:hover {
	background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );
}

</style>

<form>
  <input type="submit" name="submit1" value="Submit" class="button3" />
</form>

CSS3 Submit Button 4

CSS3 Submit Button 4

This button can be created by using text shadow, different border radius and linear gradient effect. Here is code snippet for this button.

<style>

/**
Button 4
*/

.button4 {

	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: #FFF;
	padding: 5px 50px 5px 50px;
	border: 1px solid #999;

	text-shadow: 0px 1px 1px #666;
	text-decoration: none;

	-moz-box-shadow: 0 1px 3px #111;
	-webkit-box-shadow: 0 1px 3px #111;
	box-shadow: 0 1px 3px #111;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	background: #64a724;
	background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 );

	cursor: pointer;

}
.button4:hover {
	border: 1px solid #FFF;
}

</style>

<form>
  <input type="submit" name="submit1" value="Submit" class="button4" />
</form>

CSS3 Submit Button 5

CSS3 Submit Button 5

This button can be created by using amazing text shadow, tricky border radius and stunning linear gradient effect. Here is code snippet for this button.

<style>

/**
Button 5
*/

.button5 {

	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 22px;
	color: #443333;
	padding: 5px 50px 5px 50px;
	border: 1px solid #999;

	text-shadow: 0px 1px 1px #CCC;
	text-decoration: none;

	-moz-box-shadow: 0 1px 3px #111;
	-webkit-box-shadow: 0 1px 3px #111;
	box-shadow: 0 1px 3px #111;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	background: #696969;
	background: -moz-linear-gradient(top, #d1d1d1 10%, #7b7b7b 60%, #696969 80%, #696969 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#7b7b7b), color-stop(0.4, #d1d1d1), color-stop(0.8, #7b7b7b), color-stop(.9, #696969), color-stop(0.9, #696969));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#7b7b7b', GradientType=0 );

	cursor: pointer;

}
.button5:hover {
	color: #000;
}

</style>

<form>
  <input type="submit" name="submit1" value="Submit" class="button5" />
</form>

I hope you have enjoyed the CSS3 Submit Buttons. You can modify these examples to create unlimited text and box shadow, linear gradient and radius effects.

Don’t Forget to Follow TutorialChip on Twitter or Subscribe to TutorialChip to Get the Latest Updates on Giveaways, Tutorials and More for Free.

2 thoughts

Comments are closed.