网站首页 > 技术文章正文

有趣的css - 流光圆形按钮（css实现流光按钮效果）

nanyue 2025-07-28 19:24:49 技术文章 1 ℃

正文字数 671 | 阅读约 3 分钟

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一款好看的流光圆形按钮。

最新文章通过公众号「设计师工作日常」发布。

整体效果

知识点：
1 :before 伪选择器
2 :hover 选择器
3 transition 过渡属性
4 linear-gradient 线性渐变值
5 position 定位属性

思路：
绘制一个圆形按钮，然后通过伪选择器创建一个渐变背景块，通过鼠标状态来改变渐变背景块的定位。

好看的流光圆形按钮，适用于多平级入口，例如多个分享入口。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

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，这里是「设计师工作日常」，求点赞求关注！

上一篇： CSS入门指南:核心概念与实用技巧（css, the definitive guide）
下一篇：在div中如何垂直对齐文本（div怎么垂直居中）

网站首页 > 技术文章 正文