题记：我们工作中会出现一些按钮需要用一些2D的效果，用css会发现很容易做到这样的效果，大部分的思路通过过渡，2D，hover事件，以及overflow的之间配合实现button按钮的背景颜色的渐变效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.button {
display: inline-block;
padding: 12px 24px;
border: 1px solid #4f4f4f;
border-radius: 4px;
/* 我们给button的样式改变给予一个过渡效果 时间为0.2秒，具体什么样式54行 */
transition: all 0.2s ease-in;
position: relative;
/* 我们移动的时候让移动的东西在button之外隐藏，大部分css的效果都是这样做到的 */
overflow: hidden;
font-size: 19px;
color: black;
/* 堆叠顺序更高一些，要不会出现文字被折叠的现象 */
z-index: 1;
}
.button:before {
content: "";
position: absolute;
left: 50%;
/* transform: translateX(-50%) scaleY(1) scaleX(1.25); */
top: 100%;
width: 140%;
height: 180%;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
display: block;
/* 过渡时间为1s，可以根据自己的需求看看过渡的效果
0.1s 一个开始延迟的时间，基本上感受不到
cubic-bezier(0.55, 0, 0.1, 1)三次贝塞尔曲线经常用到
*/
transition: all 1s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
z-index: -1;
}
.button:after {
content: "";
position: absolute;
left: 55%;
/* transform: translateX(-50%) scaleY(1) scaleX(1.45); */
top: 180%;
width: 160%;
height: 190%;
background-color: #39bda7;
border-radius: 50%;
display: block;
/* 过渡时间为1s，可以根据自己的需求看看过渡的效果
0.1s 一个开始延迟的时间，基本上感受不到
cubic-bezier(0.55, 0, 0.1, 1)三次贝塞尔曲线经常用到
*/
transition: all 5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
z-index: -1;
}
.button:hover {
color: #ffffff;
border: 1px solid #39bda7;
}
.button:hover:before {
top: -35%;
background-color: #39bda7;
/* 2D效果左移，高宽拉伸 */
transform: translateX(-50%) scaleY(1.6) scaleX(0.8);
}
.button:hover:after {
top: -45%;
background-color: #39bda7;
transform: translateX(-50%) scaleY(1.6) scaleX(0.8);
}
</style>
</head>
<body>
<!-- 实现一个按钮的背景效果我们的思路是创造一个元素，然后去移动到我们的button上，所以我们
需要父相子绝，另外通过过渡效果产生时间的效果，我们现在做的是从右下角开始慢慢出现效果-->
<button class="button"> 我是按钮我骄傲
</button>
</body>
</html>
注明：喜欢的老铁点个赞，做一个自己喜欢的按钮效果，工作顺利，事业长虹！！！