width: 112px;
height: 34px;
border: none;
border-radius: 8px;
background: linear-gradient(
270deg,
rgba(241, 187, 73, 1) 0%,
rgba(241, 154, 73, 1) 44%,
rgba(241, 131, 73, 1) 100%
);
color: #fff;
cursor: pointer;
}
button:before {
content: '';
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
display: inline-block;
width: 100%;
height: 34px;
border-radius: 8px;
background: inherit;
filter: blur(3px) brightness(0.95);
}
过程中遇到一点问题,由于最外面的盒子position: relative;会影响阴影效果的定位,可以用transform来解决。