Pure CSS for 3D button effects

Share a 3D button that is implemented with pure CSS today.
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;}

Go to the website to view the demo

Category: CSS3,HTML5

Pure CSS for 3D button effects