练习一个按钮 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .ripple-button {
        font-size: 16px;
        font-weight: bold;
        color: white;
        border: none;
        border-radius: 6px;
        background: linear-gradient(to right, #006eff, #00f2ff);
        padding: 7px 14px;
        box-shadow: 0 4px 8px #ccc;
        cursor: pointer;
        transition:
          box-shadow 0.2s ease-in-out,
          transform 0.2s ease-in-out;
      }
      .ripple-button:hover {
        box-shadow: 0 8px 16px #ccc;
      }
      .ripple-button:active {
        transform: scale(95%, 95%);
      }
    </style>
  </head>
  <body>
    <button class="ripple-button">点击我</button>
  </body>
</html>

 

posted @ 2026-01-22 16:18  风铃摇曳  阅读(1)  评论(0)    收藏  举报