Pure CSS buttons that actually look good – is it a myth? These days, I don’t believe they are. Sometimes I’m too lazy to get onto photoshop and play around with designs until I work something good out, or I don’t feel that it’s worth it to hire a professional designer. If there’s one thing I do know though, it’s how to code a design in css. Here are some buttons that I designed purely in CSS, and I’ll give you the CSS for these buttons completely free .

Buttons that I Made Using Just CSS:

CSS Button Style #1 – Inspired by Twitter

Example of Button Style #1

CSS code for Style #1

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

CSS Button Style #2

Example of Button Style #2

CSS code for Style #2

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

CSS Button Style #3

Example of Button Style #3 – Facebook Style

CSS code for Style #3

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

CSS Button Style #4

Example of Button Style #4

CSS code for Style #4

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

CSS Button Style #5

Example of Button Style #5

CSS code for Style #5

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

I’m excited to hear which ones you think are the best, so let me know here in the comments, okay? If you’re comfortable using images in your design styles, then you might want to check out this post on adjustable css buttons from my friend Soh Tanaka

I have a related post on table css design styles that you may also appreciate.

Share the Love	Get Free Updates
Tweet