【CSS】五个丝滑的按钮
本帖最后由 ckblt 于 2022-1-25 19:00 编辑纯HTML5+CSS3做成的五个丝滑的按钮~{:10_256:}
<!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>
{:5_95:}
页:
[1]