<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>button点击效果</title><style>#container {display: flex;align-items: center;justify-content: center;}.pushable {position: relative;background: transparent;padding: 0px;border: none;cursor: pointer;outline-offset: 4px;outline-color: deeppink;transition: filter 250ms;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.shadow {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: hsl(226, 25%, 69%);border-radius: 8px;filter: blur(2px);will-change: transform;transform: translateY(2px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.edge {position: absolute;top: 0;left: 0;height: 100%;width: 100%;border-radius: 8px;background: linear-gradient(to right,hsl(248, 39%, 39%) 0%,hsl(248, 39%, 49%) 8%,hsl(248, 39%, 39%) 92%,hsl(248, 39%, 29%) 100%);}.front {display: block;position: relative;border-radius: 8px;background: hsl(248, 53%, 58%);padding: 16px 32px;color: white;font-weight: 600;text-transform: uppercase;letter-spacing: 1.5px;font-size: 1rem;transform: translateY(-4px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.pushable:hover {filter: brightness(110%);}.pushable:hover .front {transform: translateY(-6px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .front {transform: translateY(-2px);transition: transform 34ms;}.pushable:hover .shadow {transform: translateY(4px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .shadow {transform: translateY(1px);transition: transform 34ms;}.pushable:focus:not(:focus-visible) {outline: none;}</style>
</head><body><div id="container"><button class="pushable"><span class="shadow"></span><span class="edge"></span><span class="front">梦雨生生</span></button></div><script></script>
</body></html>
