原文地址：https://segmentfault.com/a/1190000014599280
HTML代码：
<div class="box">BUTTON</div>
css代码：
/* 内容居中*/html, body { ???/* 使body继承HTML的高度 ,否则box是不能垂直居中*/ ???height: 100%; ???margin: 0; ???padding: 0; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: skyblue;}/*设置按钮的 2d 样式，为了便于调整按钮尺寸，使用了变量*/.box{ ???background:linear-gradient(to right,gold,darkorange); ???color:white; ???--width:250px; ???--height:calc(var(--width)/3); ???width:var(--width); ???height:var(--height); ???text-align: center; ???line-height: var(--height); ???font-size:cal(var(--height)/2.5); ???font-family:sans-serif; ???letter-spacing:0.2em; ???border:1px solid darkgoldenrod; ???border-radius:2em; ???/*设置按钮的 3d 样式*/ ???transform: perspective(500px) rotateY(-15deg); ???text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2); ???box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2); ???transition: 0.5s; ???position: relative; ???overflow: hidden;}/* 定义按钮的鼠标划过动画效果 */.box:hover { ???transform: perspective(500px) rotateY(15deg); ???text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2); ???box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);}/* 用伪元素增加光泽 */.box::before { ???position: absolute; ???content: ‘‘; ???width: 100%; ???height: 100%; ???background: linear-gradient(to right, transparent, white, transparent); ???left: -100%; ???transition: 0.5s;}.box:hover::before { ???left: 100%;}前端每日实战4. 纯 CSS 创作一个金属光泽 3D 按钮特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10090720.html