【CSS】五个丝滑的按钮

ckblt · 发表于 2022-1-25 19:01:18

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 ckblt 于 2022-1-25 19:00 编辑

纯HTML5+CSS3做成的五个丝滑的按钮~

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五个丝滑的按钮！</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #app {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
      }

      #btn1,
      #btn2,
      #btn3,
      #btn4,
      #btn5 {
        display: block;
        margin: 30px;
        font-size: 20px;
      }

      #btn1 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, background-color 0.2s, font-size 0.2s,
          border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn1:hover {
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
        font-size: 23px;
      }
      #btn1:hover:active {
        font-size: 19px;
        border: solid 7px #000;
        background-color: #bbb;
      }

      #btn2 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, border 0.2s, background-color 0.2s,
          font-size 0.2s, border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn2:hover {
        background-color: #aaa;
        border: solid 3px #000;
        color: #000;
        font-size: 23px;
      }
      #btn2:hover:active {
        font-size: 25px;
        border: solid 7px #000;
        background-color: #ddd;
      }

      #btn3 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, border 0.2s, background-color 0.2s,
          font-size 0.2s, border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn3:hover {
        background-color: #bbb;
        border: solid 7px #000;
        color: #000;
        font-size: 22px;
      }
      #btn3:hover:active {
        font-size: 25px;
        border: solid 5px #000;
        background-color: #ddd;
      }

      #btn4 {
        width: 120px;
        height: 60px;
        filter: blur(0);
        transition: width 0.2s, height 0.2s, color 0.2s, border 0.2s,
          background-color 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn4:hover {
        width: 130px;
        height: 70px;
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
      }
      #btn4:hover:active {
        width: 110px;
        height: 50px;
        border: solid 3px #000;
        background-color: #bbb;
      }

      #btn5 {
        width: 120px;
        height: 60px;
        filter: blur(0);
        transition: width 0.2s, height 0.2s, color 0.2s, border 0.2s,
          background-color 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn5:hover {
        width: 110px;
        height: 50px;
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
      }
      #btn5:hover:active {
        width: 130px;
        height: 70px;
        border: solid 3px #000;
        background-color: #bbb;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>五个丝滑的按钮</h1>
      <h3>By Ckblt</h3>
      <button id="btn1">button1</button>
      <button id="btn2">button2</button>
      <button id="btn3">button3</button>
      <button id="btn4">button4</button>
      <button id="btn5">button5</button>
      <p>注：由于 button4 和 button5 会变大小，不建议使用</p>
    </div>
  </body>
</html>

hornwong · 发表于 2022-1-26 22:04:20

账号		自动登录	找回密码
密码			立即注册

[作品展示] 【CSS】五个丝滑的按钮

马上注册，结交更多好友，享用更多功能^_^