Create a Photoshop-like Button in CSS3

December 22, 2011 in Design, Tutorials

In this tutorial, I’ll be showing you how to create a very natural and beautifully designed button that you would usually make in Photoshop using only CSS3. Some of the properties that I will be using heavily are CSS3 text-shadows, box-shadows, gradients and rounded corners.

First I’ll show you what we are going to be creating. Then I’ll go through each step to create the button using only HTML and CSS3 properties.

Preview

Here’s what the final product will look like:

As you can see, it looks very much like a well-designed and clean-looking button that was made in Photoshop. Now on to the code.

HTML

We’ll first begin with our button container.

<div class="button">
	<p>Click Me</p>
</div>

CSS

That’s it. Now here’s the actual CSS:

body{
	background:#f3f3f3;
}
p {
	margin:0;
	padding:0;
}
.button {
	/*---- Button Properties ----*/
	width:200px;
	height:30px;
	background:#85bde1; /* fallback color for older browsers */
	padding:20px 0;
	margin:50px;

	/*---- Text Properties ----*/
	font-family:Arial, sans-serif;
	font-weight:bold;
	font-size:20pt;
	text-align:center;
	color:#444;

	/*---- Text Effects ----*/
	text-shadow: 1px 1px 0px #bfdef3;

	/*---- Rounder Corners ----*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	/*---- Gradients for Button ----*/
	background-image: linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
	background-image: -o-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
	background-image: -moz-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
	background-image: -webkit-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);
	background-image: -ms-linear-gradient(bottom, #85bde1 0%, #d8e6f0 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #85bde1),
		color-stop(1, #d8e6f0)
	);

	/*---- Inner and Outer Box Shadow ----*/
	-moz-box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;
	-webkit-box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;
	box-shadow: inset 0px 1px 1px #999, 0px 2px 1px #fff;

}

Conclusion

As you can see, I’ve commented all the areas that I adjusted within CSS3 to create the button. By doing this instead of creating an actual image in Photoshop, you’ll be able to load your pages faster and with less HTTP requests, thus making you site much more faster to load.

If you don’t understand some of the CSS3 syntax you can learn more by checking out my Cool Text Effects Using CSS3 Text Shadow tutorial or by also viewing my How to Use Css3 Gradients for Various Browsers tutorial.

If you have any other questions, please comment below.

Tags: border, button, corners, css3, Effects, photoshop, radius, rounded, Text, text-shadow