CSS to achieve 3D button effect

This time I will bring you CSS to realize the 3D button effect. What are the precautions to realize the 3D button effect with CSS? . The following is a practical case, let’s take a look.

css cleverly uses box-shadow to achieve the three-dimensional effect of 3D objects. When the button is pressed, the box-shadow and top values ​​are modified.

It feels like a button is being 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", 微软雅黑, 宋体;
 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, 31, 5, 1), 0px 9px 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 make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */
a.css-3d-btn:active{
 box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
 position: relative;
 top: 6px;
}

The effect is as follows:

I believe I have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use transparent to make a triangle

##HTML5+CSS3 loading progress bar and download progress bar implementation

The above is the detailed content of CSS to achieve 3D button effect. For more information, please follow other related articles on the PHP Chinese website!