正文字数 671 | 阅读约 3 分钟
大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一款好看的流光圆形按钮。
最新文章通过公众号「设计师工作日常」发布。
整体效果
知识点：
1:before伪选择器
2:hover选择器
3transition过渡属性
4linear-gradient线性渐变值
5position定位属性
思路：
绘制一个圆形按钮，然后通过伪选择器创建一个渐变背景块，通过鼠标状态来改变渐变背景块的定位。
好看的流光圆形按钮，适用于多平级入口，例如多个分享入口。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<button class="btn107">
<span class="icon107">Fspan>
button>圆形按钮静态代码。
css 部分代码
.btn107{
width: 70px;
height: 70px;
font-size: 30px;
font-weight: bold;
border-radius: 50%;
color: #24C55E;
background-color: #000;
background-position: 00;
border: 2px solid rgba(36,197,94,0.2);
cursor: pointer;
outline: none;
box-sizing: border-box;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s linear;
}
.icon107{
position: absolute;
z-index: 10;
}
.btn107:hover:before{
left: 70px;
}
.btn107:before{
content: '';
width: 70px;
height: 100%;
background: linear-gradient(to right, #0000, rgba(36,197,94,0.3) 50%, #000100%);
position: absolute;
left: -70px;
top: 0;
transition: all 0.3s linear;
}
.btn107:hover{
transform: scale(1.1);
border: 2px solid rgba(36,197,94,0.8);
}1、先设置圆形按钮的基本样式，并且添加
transition过渡属性。
2、定位按钮上文字元素，并且添加层级，让其层级最高。
3、通过
:before伪选择器，创建一个渐变背景块， 定位渐变背景块的初始位置，添加transition过渡属性。
4、通过
:hover选择器，当鼠标悬浮在按钮上方时，改变伪元素渐变背景块的位置。
5、同样通过
:hover选择器，当鼠标悬浮在按钮上方时，放大按钮尺寸，以及改变边框颜色。
完整代码如下
html 页面
html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>公众号：设计师工作日常title>
head>
<body>
<div class="app">
<button class="btn107">
<span class="icon107">Fspan>
button>
div>
body>
html>css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #333;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn107{
width: 70px;
height: 70px;
font-size: 30px;
font-weight: bold;
border-radius: 50%;
color: #24C55E;
background-color: #000;
background-position: 00;
border: 2px solid rgba(36,197,94,0.2);
cursor: pointer;
outline: none;
box-sizing: border-box;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s linear;
}
.icon107{
position: absolute;
z-index: 10;
}
.btn107:hover:before{
left: 70px;
}
.btn107:before{
content: '';
width: 70px;
height: 100%;
background: linear-gradient(to right, #0000, rgba(36,197,94,0.3) 50%, #000100%);
position: absolute;
left: -70px;
top: 0;
transition: all 0.3s linear;
}
.btn107:hover{
transform: scale(1.1);
border: 2px solid rgba(36,197,94,0.8);
}页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
我是 Just，这里是「设计师工作日常」，求点赞求关注！