I slaved away for a few hours and created nice buttons that work purely using CSS,and they are cross-browser compatible. That means that they do not use images at all,and they should format nicely in almost any browser.

Check them out and see if there are any you like:
List of Buttons

Button 1

Preview:

Code:

<input type="submit" class="styled-button-1" value="Download" />
<style type="text/css"> 
.styled-button-1 {
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	color:#333;
	background-color:#FA2;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:none;
	font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
	height:32px;
	padding:4px 16px;
	text-shadow:#FE6 0 1px 0
}
</style>

Button 2

Preview:

Code:

<input type="submit" class="styled-button-2" value="Download" /> 
<style type="text/css">
.styled-button-2 {
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	border-bottom-color:#333;
	border:1px solid #61c4ea;
	background-color:#7cceee;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	color:#333;
	font-family:'Verdana',Arial,sans-serif;
	font-size:14px;
	text-shadow:#b2e2f5 0 1px 0;
	padding:5px
}
</style>

Button 3

Preview:

Code:

<input type="submit" class="styled-button-3" value="Download" /> 
<style type="text/css">
.styled-button-3 {
	-webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	background-color:#5B74A8;
	border:1px solid #29447E;
	font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
	font-size:12px;
	font-weight:700;
	padding:2px 6px;
	height:28px;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px
}
</style>

Button 4

Preview:

Code:

<input type="submit" class="styled-button-4" value="Download" /> 
<style type="text/css">
.styled-button-4 {
	-webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
	background-color:#EEE;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border:1px solid #999;
	color:#666;
	font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
	font-size:11px;
	font-weight:700;
	padding:2px 6px;
	height:28px
}
</style>

Button 5

Preview:

Code:

<input type="submit" class="styled-button-5" value="Download" /> 
<style type="text/css">
.styled-button-5 {
	background-color:#ed8223;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:18px;
	line-height:30px;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border:0;
	text-shadow:#C17C3A 0 -1px 0;
	width:120px;
	height:32px
}
</style>

Button 6

Preview:

Code:

<input type="submit" class="styled-button-6" value="Download" /> 
<style type="text/css">
.styled-button-6 {
	background:#f78096;
	background:-moz-linear-gradient(top,#f78096 0%,#f56778 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
	background:-webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
	background:-o-linear-gradient(top,#f78096 0%,#f56778 100%);
	background:-ms-linear-gradient(top,#f78096 0%,#f56778 100%);
	background:linear-gradient(top,#f78096 0%,#f56778 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
	padding:5px 4px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ae4553
}
</style>

Button 7

Preview:

Code:

<input type="submit" class="styled-button-7" value="Download" /> 
<style type="text/css">
.styled-button-7 {
	background:#FF5DB1;
	background:-moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
	background:-webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background:-o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background:-ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background:linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5DB1',endColorstr='#E94A86',GradientType=0);
	padding:5px 7px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #E8124F
}
</style>

Button 8

Preview:

Code:

<input type="submit" class="styled-button-8" value="Download" />
<style type="text/css">
.styled-button-8 {
	background:#25A6E1;
	background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
	background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
	padding:8px 13px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:17px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #1A87B9
}
</style>

Button 9

Preview:

Code:

<input type="submit" class="styled-button-9" value="Download" />
<style type="text/css">
.styled-button-9 {
	background:#00A0D1;
	background:-moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
	background:-webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
	background:-o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
	background:-ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
	background:linear-gradient(top,#00A0D1 0%,#008DB8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
	padding:8px 20px;
	color:#cfebf3;
	font-family:'Helvetica Neue',sans-serif;
	font-size:13px;
	border-radius:40px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border:1px solid #095B7E
}
</style>

Button 10

Preview:

Code:

<input type="submit" class="styled-button-10" value="Download" />
<style type="text/css">
.styled-button-10 {
	background:#5CCD00;
	background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
	background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
	padding:10px 15px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:16px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #459A00
}
</style>

Button 11

Preview:

Code:

<input type="submit" class="styled-button-11" value="Download" /> 
<style type="text/css">
.styled-button-11 {
	background:#FEDA71;
	background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
	background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
	background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
	background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
	background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
	padding:8px 18px;
	color:#623F1D;
	font-family:'Helvetica Neue',sans-serif;
	font-size:16px;
	border-radius:48px;
	-moz-border-radius:48px;
	-webkit-border-radius:48px;
	border:1px solid #623F1D
}
</style>

Button 12

Preview:

Code:

<input type="submit" class="styled-button-12" value="Download" /> 
<style type="text/css">
.styled-button-12 {
	background:#5B74A8;
	background:-moz-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5B74A8),color-stop(100%,#5B74A8));
	background:-webkit-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
	background:-o-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
	background:-ms-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
	background:linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5B74A8',endColorstr='#5B74A8',GradientType=0);
	padding:2px 6px;
	color:#fff;
	font-family:'Helvetica',sans-serif;
	font-size:11px;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border:1px solid #1A356E
}
</style>

34 Comments

meeetme June 29, 2012

thank you very useful

- RUMESH LIYANAGE November 17, 2012
  
  EXCELLENT WORK
  THANX
  
bakri altaif July 15, 2012

it’s very very usefull , thanks alot

Tien Anh July 17, 2012

Good lesson, Thanks

test July 28, 2012

you gave me what I wanted. thanks

jones August 4, 2012

Cool that,s really helpful….!!!!!

Anzpotter August 5, 2012

Useful..
thanks

WenWen August 14, 2012

very useful.. thanks a lot:)

esther August 17, 2012

It is really very usefull thank a lot

Natthakrit August 26, 2012

thank good job.

khaled September 1, 2012

you call that professional

- Graeme September 1, 2012
  
  Well, in the new style of websites, yes. Is Facebook a professionally designed website? Is Twitter a professionally designed website? Maybe the title is a little ambiguous, I’ll give you that.
  
- Sara November 20, 2012
  
  Khaled, that was a “nono”. If you have something you call professional, then show it!
  
naveed khan October 16, 2012

Thank you dear, very nice css . very help full..
and it saves my time…:)

Surbhi October 26, 2012

Very good work! Thanks a lot

kapil November 2, 2012

Vikram November 4, 2012

Thanks, this was useful.

Bytza November 8, 2012

Thankyou very mutch.
Realy nice buttons

DuskWalker November 18, 2012

Cool, thanks very much!

Homeschool Dad November 28, 2012

Wow, this is great! Thanks so much for sharing!!
AND…yes, they ARE Professional…compared to the standard looking default browser buttons. On top of that, much better than I could do. Thanks!

Daan December 12, 2012

Hi,

thanks a lot -> but I found out that the code is not showing in Chrome…I could only see the buttons, but not the explanation.

Just to let you know!

Greetings,

Daan

Tony December 16, 2012

You are great.Easy .Buttons were done the best and easy way .Thanks for sharing.

V. Ramesh January 6, 2013

smart work

dan kunslow January 9, 2013

excellent work ,, this is very useful, it would help if we could get some hover and on click styles as well for each button,, so im waiting for that…

Levi February 18, 2013

Thank you!!!!
Its very good work!
This is exactly I wanted!!

You are the best!

sohrab March 1, 2013

this was a helpful coding, thanks

Martin OGorman March 5, 2013

Love them a massive time saver… Big thankyou

Cloud Computing March 21, 2013

Really nice collection of buttons. Thak you

chandru March 26, 2013

sir it is very nice collections thanq

Reuben April 17, 2013

Great collection, thanks for your work and thanks for sharing!

Jesse April 23, 2013

Awesome!!! Thanks a bunch!

sweety April 27, 2013

Thanks a Ton!!!

Paul May 9, 2013

A nice collection, will be useful for people to learn the syntax behind the various gradient hacks as long as they DO NOT just cut and paste.

I do agree with Dan, a lack of Hover, Visited etc does not really do them justice.

From a ‘professional’ stand point, it is really quite subjective. You may have a client who requires a big orange button or you may not. I’ve not had one thankfully.

Personally, I am not a massive fan as I think you have some button sizing issues to address, along with some issues with your font color and size.

In terms of the markup I tend to avoid using ‘px’ when marking font-size, as it can lead to disjointed styles on the user side.

But fair play none the less buddy good job.

Abraham May 13, 2013

Thank you, These r so helpful for me, appreciated.

12 Professional CSS Buttons

Button 1

Preview:

Code:

Button 2

Preview:

Code:

Button 3

Preview:

Code:

Button 4

Preview:

Code:

Button 5

Preview:

Code:

Button 6

Preview:

Code:

Button 7

Preview:

Code:

Button 8

Preview:

Code:

Button 9

Preview:

Code:

Button 10

Preview:

Code:

Button 11

Preview:

Code:

Button 12

Preview:

Code:

34 Comments

Post a Reply Cancel reply