鱼C论坛

 找回密码
 立即注册
查看: 1939|回复: 1

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

[复制链接]
发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-26 22:04:20 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 19:04

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表