|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
复制代码 |
|