CSS for 3D button effects

This time to bring you CSS to achieve the 3D button effect, CSS 3D button effect of the attention to what the following is the actual case, together to see.

CSS cleverly utilizes the Box-shadow to achieve the stereoscopic 3D object, when the button is pressed to modify the Box-shadow and top values.

It feels like a button is pressed. The CSS code is very small, as shown below

a.css-3d-btn{position:relative; Color:rgba (255, 255, 255, 1); text-decoration:none; Background-color:rgba (219, 87, 51 , 1); Font-family: "Microsoft Yahei", Microsoft Ya-hei, song body; font-weight:700; Font-size:3em; Display:block; padding:4px; border-radius:8px; /* Let's use box shadows to make the button look more 3-dimensional */box-shadow:0px 9px 0px Rgba (219, 5, 1), 0px 9p X 25px rgba (0, 0, 0,. 7); margin:100px Auto; width:160px; Text-align:center; -webkit-transition:all. 1s ease; -moz-transition:all. 1s ease; Transition:all. 1s ease;} /* Now if we do the box shadows smaller when the button was clicked, it ' ll look like the button had been "pushed" */a.css -3d-btn:active{box-shadow:0px 3px 0px Rgba (219, 5, 1), 0px 3px 6px rgba (0, 0, 0,. 9); position:relative; top:6px;}

The effect is as follows:

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Make a triangle with transparent

HTML5+CSS3 Loading progress bar and download progress bar implementation