前端库——按钮（我发誓你会感叹按钮玩出来的花样）
前端库——按钮
- 前言
- 知识点
-
- 1.流布局
- 2.线性渐变
- 3.径向渐变
- 4.锥形渐变
- 5.滤镜
- 基础按钮1
-
- 修饰宽高设置颜色
-
- 修饰部分：
- 修饰边框阴影
-
- 修饰部分：
- 拟态按钮1
-
-
- 修饰部分：
-
- 拟态按钮2
-
-
- 关键代码：
- 非常规形状拟态
-
- 关键代码：
-
- 水滴效果按钮
-
-
- 关键代码：
-
- 毛玻璃按钮效果
-
- 线性渐变毛玻璃
-
- 关键代码：
- 中心渐变毛玻璃
-
- 关键代码：
- 毛玻璃灯光效果
-
-
- 关键代码：
-
- 中心磨砂差值色按钮
-
-
- 关键代码：
-
- 流动线条按钮
-
-
- 关键代码：
-
前言
所有按钮均使用html+css实现，其实做一个网站这些小细节确实是很重要的，所以我整理了一下我常用的一些按钮样式，当然配色大家自由发挥，按照风格来。
知识点
1.流布局
//使用流布局
display:flex;
//横向居中
justify-content: center;
//纵向居中
align-items: center;
2.线性渐变
//颜色的线性渐变,角度为20deg
background:linear-gradient(20deg,#fff,#ddd....)
3.径向渐变
//颜色的线性渐变
background:radial-gradient(#fff,#ddd....)
4.锥形渐变
目前最新版本浏览器支持，老版本都不行
//颜色的锥形渐变
background:conic-gradient(#fff 20deg ,#ddd 120deg....)
5.滤镜
这两张图具体介绍：菜鸟教程
//高斯模糊
filter:blur(2px);
基础按钮1
无任何修饰
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#container{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn1">
div>
body>
html>
修饰宽高设置颜色
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#container{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
#btn1{
height: 50px;
width: 200px;
background-color: rgb(253, 253, 253);
font-size: 24px;
line-height: 50px;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn1" id="btn1">
div>
body>
html>
修饰部分：
#btn1{
height: 50px;
width: 200px;
background-color: rgb(253, 253, 253);
font-size: 24px;
line-height: 50px;
}
修饰边框阴影
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#container{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(214, 214, 214);
}
#btn1{
height: 50px;
width: 200px;
background-color: rgb(247, 247, 247);
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 6px;
cursor: pointer;
box-shadow: 2px 2px 1px 2px rgb(122, 122, 122);
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn1" id="btn1">
div>
body>
html>
修饰部分：
#btn1{
height: 50px;
width: 200px;
background-color: rgb(247, 247, 247);
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 6px;
cursor: pointer;
box-shadow: 2px 2px 1px 2px rgb(122, 122, 122);
}
拟态按钮1
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
#container{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(235, 235, 235);
}
#btn1{
height: 50px;
width: 200px;
background-color: rgb(247, 247, 247);
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 4px 4px 5px 2px rgb(122, 122, 122),-4px -4px 5px 2px #fff;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn1" id="btn1">
div>
body>
html>
修饰部分：
#btn1{
height: 50px;
width: 200px;
background-color: rgb(247, 247, 247);
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 4px 4px 5px 2px rgb(122, 122, 122),-4px -4px 5px 2px #fff;
}
拟态按钮2
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(241, 195, 255);
}
#btn2 {
height: 50px;
width: 200px;
background-color: rgb(247, 174, 250);
color: #fff;
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 5px 8px 16px 2px rgb(231, 134, 255),
-1px -1px 5px 2px rgb(255, 255, 255),
1px 1px 2px 2px rgb(241, 154, 218) inset,
-1px -1px 2px 2px rgb(255, 244, 253) inset;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn2" id="btn2">
div>
body>
html>
关键代码：
#btn2 {
height: 50px;
width: 200px;
background-color: rgb(247, 174, 250);
color: #fff;
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 5px 8px 16px 2px rgb(231, 134, 255),
-1px -1px 5px 2px rgb(255, 255, 255),
1px 1px 2px 2px rgb(241, 154, 218) inset,
-1px -1px 2px 2px rgb(255, 244, 253) inset;
}
非常规形状拟态
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(241, 195, 255);
}
#btn2 {
height: 80px;
width: 200px;
background-color: rgb(247, 174, 250);
color: #fff;
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 40px 5px 40px 5px;
cursor: pointer;
box-shadow: 5px 8px 16px 2px rgb(231, 134, 255),
-1px -1px 5px 2px rgb(255, 255, 255),
1px 1px 2px 2px rgb(241, 154, 218) inset,
-1px -1px 2px 2px rgb(255, 244, 253) inset;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn2" id="btn2">
div>
body>
html>
关键代码：
#btn2 {
height: 80px;
width: 200px;
background-color: rgb(247, 174, 250);
color: #fff;
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
border-radius: 40px 5px 40px 5px;
cursor: pointer;
box-shadow: 5px 8px 16px 2px rgb(231, 134, 255),
-1px -1px 5px 2px rgb(255, 255, 255),
1px 1px 2px 2px rgb(241, 154, 218) inset,
-1px -1px 2px 2px rgb(255, 244, 253) inset;
}
水滴效果按钮
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(241, 195, 255);
}
#btn3 {
height: 200px;
width: 200px;
background-color: rgba(253, 188, 239, 0.897);
color: #fff;
font-weight: 700;
font-size: 30px;
line-height:200px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 10px 10px 30px 3px rgb(255, 153, 233),
-1px -1px 10px 2px rgb(255, 255, 255),
10px 10px 20px 3px rgb(245, 165, 224) inset,
-6px -6px 10px 3px rgb(255, 215, 248) inset;
}
#btn3_wrap{
position: relative;
height: 200px;
width: 200px;
}
#btn3_wrap::before{
content: '';
position: absolute;
top: 42px;
left: 32px;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: rgb(255, 226, 251);
filter: blur(0.5px);
}
#btn3_wrap::after{
content: '';
position: absolute;
top: 25px;
left: 65px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgb(255, 223, 251);
filter: blur(0.5px);
}
style>
head>
<body>
<div id="container">
<div id="btn3_wrap">
<input type="button" value="btn3" id="btn3">
div>
div>
body>
html>
关键代码：
#btn3 {
height: 200px;
width: 200px;
background-color: rgba(253, 188, 239, 0.897);
color: #fff;
font-weight: 700;
font-size: 30px;
line-height:200px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 10px 10px 30px 3px rgb(255, 153, 233),
-1px -1px 10px 2px rgb(255, 255, 255),
10px 10px 20px 3px rgb(245, 165, 224) inset,
-6px -6px 10px 3px rgb(255, 215, 248) inset;
}
#btn3_wrap{
position: relative;
height: 200px;
width: 200px;
}
#btn3_wrap::before{
content: '';
position: absolute;
top: 42px;
left: 32px;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: rgb(255, 226, 251);
filter: blur(0.5px);
}
#btn3_wrap::after{
content: '';
position: absolute;
top: 25px;
left: 65px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgb(255, 223, 251);
filter: blur(0.5px);
}
毛玻璃按钮效果
线性渐变毛玻璃
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(90, 72, 252, 0.884);
}
#btn4 {
height: 80px;
width: 240px;
background-image: linear-gradient(45deg ,rgb(94, 118, 253),
rgb(188, 194, 255), rgb(246, 215, 255));
color: rgb(35, 84, 247);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
box-shadow: -5px -5px 15px 2px rgb(184, 175, 252)
,10px 10px 20px 2px rgb(61, 16, 224);
border-radius: 14px;
cursor: pointer;
opacity: 0.5;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn4" id="btn4">
div>
body>
html>
关键代码：
#btn4 {
height: 80px;
width: 240px;
background-image: linear-gradient(45deg ,rgb(94, 118, 253),
rgb(188, 194, 255), rgb(246, 215, 255));
color: rgb(35, 84, 247);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
box-shadow: -5px -5px 15px 2px rgb(184, 175, 252)
,10px 10px 20px 2px rgb(61, 16, 224);
border-radius: 14px;
cursor: pointer;
opacity: 0.5;
}
中心渐变毛玻璃
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(rgb(68, 38, 202),rgb(162, 142, 252));
}
#btn4 {
height: 80px;
width: 240px;
/* background-image: linear-gradient(45deg ,rgb(94, 118, 253),
rgb(188, 194, 255), rgb(246, 215, 255)); */
color: rgb(35, 84, 247);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
box-shadow: -5px -5px 10px 2px rgb(255, 255, 255)
,10px 10px 20px 2px rgb(23, 11, 66);
border-radius: 14px;
cursor: pointer;
opacity: 0.2;
}
style>
head>
<body>
<div id="container">
<input type="button" value="btn4" id="btn4">
div>
body>
html>
关键代码：
#btn4 {
height: 80px;
width: 240px;
/* background-image: linear-gradient(45deg ,rgb(94, 118, 253),
rgb(188, 194, 255), rgb(246, 215, 255)); */
color: rgb(35, 84, 247);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
box-shadow: -5px -5px 10px 2px rgb(255, 255, 255)
,10px 10px 20px 2px rgb(23, 11, 66);
border-radius: 14px;
cursor: pointer;
opacity: 0.2;
}
毛玻璃灯光效果
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(rgb(68, 38, 202),rgb(162, 142, 252));
}
#btn4 {
position: relative;
z-index: 100;
height: 80px;
width: 240px;
color: rgb(0, 18, 77);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
/* box-shadow: -5px -5px 10px 2px rgb(255, 255, 255)
,10px 10px 20px 2px rgb(23, 11, 66); */
border-radius: 14px;
cursor: pointer;
opacity: 0.2;
}
#btn4_wrap::after{
z-index: 10;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 100px;
border-radius: 10px;
background-color: rgb(51, 233, 218);
filter: blur(10px);
}
style>
head>
<body>
<div id="container">
<div id="btn4_wrap">
<input type="button" value="btn4" id="btn4">
div>
div>
body>
html>
关键代码：
#btn4 {
position: relative;
z-index: 100;
height: 80px;
width: 240px;
color: rgb(0, 18, 77);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: none;
/* box-shadow: -5px -5px 10px 2px rgb(255, 255, 255)
,10px 10px 20px 2px rgb(23, 11, 66); */
border-radius: 14px;
cursor: pointer;
opacity: 0.2;
}
#btn4_wrap::after{
z-index: 10;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 100px;
border-radius: 10px;
background-color: rgb(51, 233, 218);
filter: blur(10px);
}
中心磨砂差值色按钮
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(rgb(0, 165, 41),rgb(0, 49, 19));
}
#btn4 {
position: relative;
z-index: 100;
height: 80px;
width: 240px;
color: rgb(204, 253, 192);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: 2px solid rgb(68, 196, 96);
background-color: rgb(0, 150, 37);
box-shadow: inset 0px 0px 15px 10px rgb(117, 241, 169);
border-radius: 14px;
cursor: pointer;
}
style>
head>
<body>
<div id="container">
<div id="btn4_wrap">
<input type="button" value="btn4" id="btn4">
div>
div>
body>
html>
关键代码：
#btn4 {
position: relative;
z-index: 100;
height: 80px;
width: 240px;
color: rgb(204, 253, 192);
font-weight: 700;
font-size: 24px;
line-height: 50px;
border: 2px solid rgb(68, 196, 96);
background-color: rgb(0, 150, 37);
box-shadow: inset 0px 0px 15px 10px rgb(117, 241, 169);
border-radius: 14px;
cursor: pointer;
}
流动线条按钮
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(216, 131, 255);
}
#btn5_wrap{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 240px;
width: 240px;
border-radius: 10px;
box-shadow: 5px 5px 18px 2px rgb(175, 66, 179);
}
#btn5_wrap::before{
content: '';
position: absolute;
width: 150%;
height: 150%;
background: conic-gradient(
rgb(226, 77, 226) 20deg,
transparent 120deg
);
/* border-radius: 10px; */
animation: an 2s linear infinite;
}
#btn5_wrap::after{
content: 'btn5';
color: aliceblue;
font-size: 30px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 230px;
height: 230px;
background-color: rgb(231, 131, 235);
box-shadow: inset 5px 5px 10px 2px rgb(204, 95, 204);
border-radius: 10px;
}
@keyframes an{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
style>
head>
<body>
<div id="container">
<div id="btn5_wrap">
div>
div>
body>
html>
关键代码：
最重要是overflow:hidden;
#btn5_wrap{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 240px;
width: 240px;
border-radius: 10px;
box-shadow: 5px 5px 18px 2px rgb(175, 66, 179);
}
#btn5_wrap::before{
content: '';
position: absolute;
width: 150%;
height: 150%;
background: conic-gradient(
rgb(226, 77, 226) 20deg,
transparent 120deg
);
/* border-radius: 10px; */
animation: an 2s linear infinite;
}
#btn5_wrap::after{
content: 'btn5';
color: aliceblue;
font-size: 30px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 230px;
height: 230px;
background-color: rgb(231, 131, 235);
box-shadow: inset 5px 5px 10px 2px rgb(204, 95, 204);
border-radius: 10px;
}
@keyframes an{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
旁边那个条是会动的！
