持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情
背景：
看过很多的按钮，就想着能不能将一些功能合并在同一个按钮中呢，其他的功能怎么去实现呢，怎么去集成那么多的按钮呢，那么我们该如何去设计一个按钮呢，于是我就写了这么一个按钮，感觉有点丑，勉强看得下去，内容比较简单，会的同学可以略过了，创作不易点赞关注评论收藏，你的点赞是我创作的动力，也是我学习的方向，谢谢啦！！！
效果展示：
这是码上掘金那么比赛的代码块，大家多看看呀，玩一玩。嘿嘿
HTML代码
对于图标的引入，设置图标的样式使用<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>库对图标设置，引用图标的id即可。
<!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>分享按钮</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/> //图标的链接，也可以用阿里巴巴的iconfont
</head>
<body>
<div class="container">
<input type="checkbox" name="" id="">
<div class="links"> //图标
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
</div>
</body>
</html>
CSS代码
对图标的位置计算，以及对鼠标点击事件的触发，绘制圆形图和收缩圆形图，对图标的样式设计，对界面的背景的设计，设置分享按钮为居中显示，方便我们触发，具体代码如下所示
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 40px;
height: 40px;
position: relative;
}
.container input{
position: absolute;
width: 100%;
height: 100%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.container input::before{ //点击前的展示字样
content: "分";
position: absolute;
font-family: 'Font Awesome 6 Free';
font-weight: 700;
font-size: 1.5rem;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3366ff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.container input:checked::before{ //点击后展示的字样
content: "享";
font-size: 2rem;
}
.container input::after{ //点击后的圆圈展示样式
content: "";
position: absolute;
top: -35%;
left: -35%;
width: 120%;
height: 120%;
z-index: -10;
border: 10px solid #3366ff;
box-shadow: 0 0 30px #9733ee4f;
border-radius: 0%;
transform: scale(.5);
transition: all .4s;
}
.container input:checked::after{
transform: scale(1.5);
border-radius: 50%;
}
.links{
position: absolute;
z-index: -10;
}
.container input:checked ~ .links{
transition: all 4s;
z-index: 50;
}
.links a{
position: absolute;
width: 40px;
height: 40px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.226);
border-radius: 50%;
cursor: pointer;
color: white;
transition: all .4s;
transition-delay: calc(var(--i)* 0.1s);
backdrop-filter: blur(5px);
}
.links a i{
font-size: 1.5em;
}
.container input:checked ~ .links a:nth-child(1){
transform: translateY(-130%); //对按钮的排版
}
.container input:checked ~ .links a:nth-child(2){
transform: translateX(130%);
}
.container input:checked ~ .links a:nth-child(3){
transform: translateY(130%);
}
.container input:checked ~ .links a:nth-child(4){
transform: translateX(-130%);
}
总结
这篇文章比较简单，只是简单的学习一下，对它有更多的认识，在有需求的时候最起码有路子，虽然很简单，但是也是可以学到东西的，我们学习了新的知识，对我们的知识储备及技术又有新的一点点的进步，前端的技术就是先简单再难嘛，积少成多之后才会成长才会进步，我们要不断的学习不断的探索，才能有学习的动力，才会有学习的欲望，创作不易，点赞评论收藏关注，嘿嘿，不喜勿喷！！！！
