多层偏移阴影堆出立体厚度，悬停时浮起更深
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx{padding:40px 0}
.fx .ls{display:block;width:200px;margin:0 auto;padding:14px 0;text-align:center;border:none;border-radius:10px;background:#fff;color:#333;font-size:16px;font-weight:700;cursor:pointer;box-shadow:1px 1px 0 #c9d1d9,2px 2px 0 #c9d1d9,3px 3px 0 #c9d1d9,4px 4px 0 #c9d1d9,5px 5px 0 #c9d1d9,6px 6px 12px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}
.fx .ls:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 #c9d1d9,6px 6px 0 #c9d1d9,9px 9px 0 #c9d1d9,12px 12px 24px rgba(0,0,0,.25)}<div class="fx">
<button class="ls">立体投影</button>
</div>