CSS3 3D Download Button + PSD

Published on: Sep 11 2012 by Anli

CSS3 3D Download Button

In this article we’re going through the process of creating a 3D download button using CSS3. This button can be used in your websites, for example, when you want to share some resource with your visitors. At the end of this tutorial you can also download the PSD file so you can play with the colors or modify the button.


VIEW DEMO

The HTML

The HTML is pretty simple. We have a div named “button” that contains our download button and a link named “blue”. The link will be our download button. I have added the “blue” class to the link so in the future we can create other buttons with different colors and style them separately.

<div class="button">
	<a class="blue" href="">Download</a>
</div>

The CSS

Let’s style the button so it matches our PSD design.

a.blue {
	display: block;
	position: relative;
	width: 155px;
	height: 38px;
	margin: 0 auto;
	padding: 12px 0 0 65px;
	background: url(../images/arrow.png) 25px center no-repeat; /* IE < 9 */
	background:
		url(../images/arrow.png) 25px center no-repeat,
		-webkit-gradient(linear, left top, left bottom, from(#bcdeeb), to(#7cbdd7));
	background:
		url(../images/arrow.png) 25px center no-repeat,
		-webkit-linear-gradient(top, #bcdeeb, #7cbdd7);
	background:
		url(../images/arrow.png) 25px center no-repeat,
		-moz-linear-gradient(top, #bcdeeb, #7cbdd7);
	background:
		url(../images/arrow.png) 25px center no-repeat,
		-o-linear-gradient(top, #bcdeeb, #7cbdd7);
	background:
		url(../images/arrow.png) 25px center no-repeat,
		-ms-linear-gradient(top, #bcdeeb, #7cbdd7);
	background:
		url(../images/arrow.png) 25px center no-repeat,
		linear-gradient(to bottom, #bcdeeb, #7cbdd7);
	background-color: #85c2da;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:
		0 0px 3px 0 #fff inset,
		0 -1px 0 0 rgba(255,255,255,.05) inset;
	-webkit-box-shadow:
		0 0px 3px 0 #fff inset,
		0 -1px 0 0 rgba(255,255,255,.05) inset;
	box-shadow:
		0 0px 3px 0 #fff inset,
		0 -1px 0 0 rgba(255,255,255,.05) inset;
	font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 24px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

We have used the CSS3 properties “border-radius” for creating the rounded corners, “box-shadow” for creating a light white border and “text-shadow” for the “Download” text. Also we have used the CSS3 multiple backgrounds for adding the arrow icon and for creating a linear gradient from top to bottom.

Our download button should look like this:

3D Download Button 1

The “::before” and “::after” pseudo elements

Now we’ll use the CSS3 pseudo elements “::before” and “::after” for adding a gradient border and for creating the bottom part of the button that gives a 3D effect to it.

a.blue::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	background-color: #3c8dac;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#85c2da), to(#3c8dac));
	background-image: -webkit-linear-gradient(top, #85c2da, #3c8dac);
	background-image: -moz-linear-gradient(top, #85c2da, #3c8dac);
	background-image: -o-linear-gradient(top, #85c2da, #3c8dac);
	background-image: -ms-linear-gradient(top, #85c2da, #3c8dac);
	background-image: linear-gradient(to bottom, #85c2da, #3c8dac);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

For creating the gradient border we’ve used the “linear-gradient” attribute and an absolute position for defining the size of the border (1px). Also we’ve used the “z-index” property for making the “::before” element appear under the button.

Now our button looks like this:

3D Download Button 2

As we said above, for giving the 3D effect to our button we’ll use the “::after” pseudo element:

a.blue::after {
	content: '';
	position: absolute;
	z-index: -2;
	top: 8px;
	right: -1px;
	bottom: -8px;
	left: -1px;
	background: #579ab4;
	border: 1px solid #4d89a0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}

Here is our 3D button:

3D Download Button 3

The “:hover” and “:active” states

Our button is almost ready. Now we’ll style the “:hover” and “:active” states so the button changes its look when the user hovers over it or clicks on it. Here is the CSS for these states:

a.blue:hover {
	background: #85c2da url(../images/arrow.png) 25px center no-repeat;
}

a.blue:active {
	top: 4px;
}

a.blue:active::after {
	top: 4px;
	bottom: -4px;
}

As you can see, for the “:hover” state we’ve just removed the linear gradient while for the “:active” state we’ve changed the position to create a pressed button effect and make it look like a real button.

Now our 3D download button is ready. Here is how it looks on the hover and active states:

3D Download Button 4

Compatibility with Internet Explorer 7, 8 and 9

As we have seen in other tutorials here on Azmind, Internet Explorer 7 and 8 don’t support the CSS3 properties and IE 9 doesn’t support the “linear-gradient” property. In IE 7-8 the button will look like a simple blue rectangle. However, there are workarounds for using some of the CSS3 properties on these browsers that you can find on Google and try yourself. I’m not listing them here since this is a CSS3 only tutorial.

Conclusion

We have created a beautiful 3D download button using CSS3 that can be used on any page you like. The most important part of this tutorial is, in my opinion, the CSS3 pseudo elements’ part. The “::before” and “::after” pseudo elements are very powerful since they let us add some extra style to the button without adding additional tags to our HTML.

Below you can download the source files and a PSD file. Enjoy!

Demo, Download and License

VIEW DEMO

DOWNLOAD FILE: CSS3 3D Download Button + PSD (1574)

LICENSE:

You can use this CSS3 download button in personal and commercial projects, but you can’t sell or redistribute it as is. If you want to publish it somewhere, please refer to this page.

4 Comments So Far

  1. Pouya says:

    Tahnk you very much! 😀

  2. sunny says:

    hi
    anli
    plz upload video tutorial

Sorry, the comment form is closed at this time.