css button 点击效果

news2025/4/19 15:52:59

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2338076.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！