AZMIND – Free Wordpress Themes & Web Design Resources

HOME
SUPPORT
SERVICES
ABOUT
CONTACT

Free WordPress Themes

YAMINTH

AzSimple

AzSands

DarkoOo

HTML Templates

Tutorials

CSS3 Tutorials

Photoshop Tutorials

HTML/CSS Tutorials

Freebies

Decorations

Free Buttons

Free Cards

Free Fonts

Free Icons

Web Design Resources

Icons Series

Mini Icons Series

Follow me: Facebook, Twitter, RSS Feed

Premium resources

Eli: Responsive Bootstrap Coming Soon Page

Genta: Responsive Bootstrap Coming Soon Page

1

2

Previous

Next

CSS3 3D Download Button + PSD

Published on: Sep 11 2012 by Anli

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.

1

2

3

<div class="button">

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

</div>

The CSS

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

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:

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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:

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:

1

2

3

4

5

6

7

8

9

10

11

12

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:

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 (449)

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.

Stay Updated

Enter your e-mail below and I’ll update you as soon as I release a new WordPress Theme, Tutorial or other Freebie:

Filed under: CSS3 Tutorials, Free Buttons, Web Design Resources

4 Comments to “CSS3 3D Download Button + PSD”

Pouya says:

September 12, 2012 at 2:56 pm

Tahnk you very much!

Reply

Anli says:

September 12, 2012 at 5:04 pm

You’re welcome Pouya.

Reply

Nalin says:

January 13, 2014 at 8:12 pm

Thank you for nice tut.

sunny says:

September 23, 2013 at 3:20 pm

hi

anli

plz upload video tutorial

Reply

Leave a Reply

Click here to cancel reply.

Name *

E-mail *

URI

My Sponsors

Popular This Month

Free HTML Template Andia: Responsive Agency/Portfolio Template built with Twitter Bootstrap

Free WordPress Theme – YAMINTH

Free Template Alissa: Responsive Bootstrap Coming Soon Page

Create a Clean Web 2.0 Login Form, Part 1: Photoshop

Free WordPress Theme – AzSimple

Social Icons Sprites: 35 Ready To Use Icons in PSD, PNG, HTML/CSS

Create a Clean Web 2.0 Login Form, Part 2: HTML & CSS

Circle Social Icons Set: 35 Social Media Icons in PSD & PNG

Responsive Register Template with Fullscreen Background Slideshow, HTML5/CSS3

Free Template Produkta: Responsive Bootstrap Product Showcase

Follow me on Facebook

Categories

About

Backgrounds

CSS

CSS3 Tutorials

Decorations

Free Buttons

Free Cards

Free Fonts

Free Icons

Free Wordpress Themes

Giveaways

HTML

HTML/CSS Tutorials

jQuery

Patterns

Photoshop Tutorials

Premium

Roundups

SEO

Stylized Text

Templates

Typography

UI Kits

Wallpapers

Web Design Resources

Wordpress

Wordpress Themes Updates

Partners

Photoshop Shapes

178.636 Downloads!

About Me

Hi! I am Anli Zaimi, an albanian web designer and developer (former informatics student) from Turin, Italy.

In this site you'll find Wordpress themes, HTML templates, icons and other web design resources. Hope you’ll like my work and enjoy the stay on my site!

Latest Tweets

Loading Tweets...

Subscribe to the Newsletter

Enter your e-mail to get the latest freebies and updates:

2009 - 2014 | AZMIND – Free Wordpress Themes & Web Design Resources

Azmind.com is powered by Wordpress