AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

鼠标滑过，酷炫来袭：探索网页设计中的按钮动画魔法！

2024-08-22 130
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 鼠标滑过，酷炫来袭：探索网页设计中的按钮动画魔法！

先上效果



🌟 网页设计中的按钮不仅是用户交互的桥梁，更是展示创意和技术的平台。酷炫的鼠标经过动画效果能够显著提升按钮的吸引力，激发用户的点击欲望，从而增加用户参与度。本文将介绍几种常用且引人注目的CSS按钮动画效果



完整代码


以下是完整代码：

HTML:

<div class="frame">
  <button class="custom-btn btn-2">btn02</button>
  <button class="custom-btn btn-3"><span>btn03</span></button>
  <button class="custom-btn btn-4"><span>btn04</span></button>
  <button class="custom-btn btn-5"><span>btn05</span></button>
  <button class="custom-btn btn-6"><span>btn06</span></button>
  <button class="custom-btn btn-7"><span>btn07</span></button>
  <button class="custom-btn btn-8"><span>btn08</span></button>
</div>

CSS代码

body {
        background: #e0e5ec;
      }
      h1 {
        position: relative;
        text-align: center;
        color: #353535;
        font-size: 50px;
        font-family: "Cormorant Garamond", serif;
      }
      
      p {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        text-align: center;
        font-size: 18px;
        color: #676767;
      }
      .frame {
        width: 50%;
        margin: 40px auto;
        text-align: center;
      }
      button {
        margin: 20px;
      }
      .custom-btn {
        width: 130px;
        height: 40px;
        color: #fff;
        border-radius: 5px;
        padding: 10px 25px;
        font-family: 'Lato', sans-serif;
        font-weight: 500;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
         box-shadow:inset 2px 2px 2px 0px rgba(125, 111, 111, 0.5),
         7px 7px 20px 0px rgba(0,0,0,.1),
         4px 4px 5px 0px rgba(0,0,0,.1);
        outline: none;
      }
      
      /* 1 */
    
      
      /* 2 */
      .btn-2 {
        background: rgb(96,9,240);
        background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
        border: none;
        
      }
      .btn-2:before {
        height: 0%;
        width: 2px;
      }
      .btn-2:hover {
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
                    -4px -4px 6px 0 rgba(116, 125, 136, .5),
          inset -4px -4px 6px 0 rgba(255,255,255,.2),
          inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
      }
      
      
      /* 3 */
      .btn-3 {
        background: rgb(0,172,238);
      background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
        width: 130px;
        height: 40px;
        line-height: 42px;
        padding: 0;
        border: none;
        
      }
      .btn-3 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      .btn-3:before,
      .btn-3:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
         background: rgba(2,126,251,1);
        transition: all 0.3s ease;
      }
      .btn-3:before {
        height: 0%;
        width: 2px;
      }
      .btn-3:after {
        width: 0%;
        height: 2px;
      }
      .btn-3:hover{
         background: transparent;
        box-shadow: none;
      }
      .btn-3:hover:before {
        height: 100%;
      }
      .btn-3:hover:after {
        width: 100%;
      }
      .btn-3 span:hover{
         color: rgba(2,126,251,1);
      }
      .btn-3 span:before,
      .btn-3 span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
         background: rgba(2,126,251,1);
        transition: all 0.3s ease;
      }
      .btn-3 span:before {
        width: 2px;
        height: 0%;
      }
      .btn-3 span:after {
        width: 0%;
        height: 2px;
      }
      .btn-3 span:hover:before {
        height: 100%;
      }
      .btn-3 span:hover:after {
        width: 100%;
      }
      
      /* 4 */
      .btn-4 {
        background-color: #4dccc6;
      background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
        line-height: 42px;
        padding: 0;
        border: none;
      }
      .btn-4:hover{
        background-color: #89d8d3;
      background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
      }
      .btn-4 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      .btn-4:before,
      .btn-4:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
         box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
                    -4px -4px 6px 0 rgba(116, 125, 136, .2),
          inset -4px -4px 6px 0 rgba(255,255,255,.9),
          inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        transition: all 0.3s ease;
      }
      .btn-4:before {
        height: 0%;
        width: .1px;
      }
      .btn-4:after {
        width: 0%;
        height: .1px;
      }
      .btn-4:hover:before {
        height: 100%;
      }
      .btn-4:hover:after {
        width: 100%;
      }
      .btn-4 span:before,
      .btn-4 span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
                    -4px -4px 6px 0 rgba(116, 125, 136, .2),
          inset -4px -4px 6px 0 rgba(255,255,255,.9),
          inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        transition: all 0.3s ease;
      }
      .btn-4 span:before {
        width: .1px;
        height: 0%;
      }
      .btn-4 span:after {
        width: 0%;
        height: .1px;
      }
      .btn-4 span:hover:before {
        height: 100%;
      }
      .btn-4 span:hover:after {
        width: 100%;
      }
      
      /* 5 */
      .btn-5 {
        width: 130px;
        height: 40px;
        line-height: 42px;
        padding: 0;
        border: none;
        background: rgb(255,27,0);
      background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
      }
      .btn-5:hover {
        color: #f0094a;
        background: transparent;
         box-shadow:none;
      }
      .btn-5:before,
      .btn-5:after{
        content:'';
        position:absolute;
        top:0;
        right:0;
        height:2px;
        width:0;
        background: #f0094a;
        box-shadow:
         -1px -1px 5px 0px #fff,
         7px 7px 20px 0px #0003,
         4px 4px 5px 0px #0002;
        transition:400ms ease all;
      }
      .btn-5:after{
        right:inherit;
        top:inherit;
        left:0;
        bottom:0;
      }
      .btn-5:hover:before,
      .btn-5:hover:after{
        width:100%;
        transition:800ms ease all;
      }
      
      
      /* 6 */
      .btn-6 {
        background: rgb(247,150,192);
      background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
        line-height: 42px;
        padding: 0;
        border: none;
      }
      .btn-6 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      .btn-6:before,
      .btn-6:after {
        position: absolute;
        content: "";
        height: 0%;
        width: 1px;
       box-shadow:
         -1px -1px 20px 0px rgba(255,255,255,1),
         -4px -4px 5px 0px rgba(255,255,255,1),
         7px 7px 20px 0px rgba(0,0,0,.4),
         4px 4px 5px 0px rgba(0,0,0,.3);
      }
      .btn-6:before {
        right: 0;
        top: 0;
        transition: all 500ms ease;
      }
      .btn-6:after {
        left: 0;
        bottom: 0;
        transition: all 500ms ease;
      }
      .btn-6:hover{
        background: transparent;
        color: #76aef1;
        box-shadow: none;
      }
      .btn-6:hover:before {
        transition: all 500ms ease;
        height: 100%;
      }
      .btn-6:hover:after {
        transition: all 500ms ease;
        height: 100%;
      }
      .btn-6 span:before,
      .btn-6 span:after {
        position: absolute;
        content: "";
        box-shadow:
         -1px -1px 20px 0px rgba(255,255,255,1),
         -4px -4px 5px 0px rgba(255,255,255,1),
         7px 7px 20px 0px rgba(0,0,0,.4),
         4px 4px 5px 0px rgba(0,0,0,.3);
      }
      .btn-6 span:before {
        left: 0;
        top: 0;
        width: 0%;
        height: .5px;
        transition: all 500ms ease;
      }
      .btn-6 span:after {
        right: 0;
        bottom: 0;
        width: 0%;
        height: .5px;
        transition: all 500ms ease;
      }
      .btn-6 span:hover:before {
        width: 100%;
      }
      .btn-6 span:hover:after {
        width: 100%;
      }
      
      /* 7 */
      .btn-7 {
      background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
        line-height: 42px;
        padding: 0;
        border: none;
      }
      .btn-7 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      .btn-7:before,
      .btn-7:after {
        position: absolute;
        content: "";
        right: 0;
        bottom: 0;
        background: rgba(251,75,2,1);
        box-shadow:
         -7px -7px 20px 0px rgba(255,255,255,.9),
         -4px -4px 5px 0px rgba(255,255,255,.9),
         7px 7px 20px 0px rgba(0,0,0,.2),
         4px 4px 5px 0px rgba(0,0,0,.3);
        transition: all 0.3s ease;
      }
      .btn-7:before{
         height: 0%;
         width: 2px;
      }
      .btn-7:after {
        width: 0%;
        height: 2px;
      }
      .btn-7:hover{
        color: rgba(251,75,2,1);
        background: transparent;
      }
      .btn-7:hover:before {
        height: 100%;
      }
      .btn-7:hover:after {
        width: 100%;
      }
      .btn-7 span:before,
      .btn-7 span:after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: rgba(251,75,2,1);
        box-shadow:
         -7px -7px 20px 0px rgba(255,255,255,.9),
         -4px -4px 5px 0px rgba(255,255,255,.9),
         7px 7px 20px 0px rgba(0,0,0,.2),
         4px 4px 5px 0px rgba(0,0,0,.3);
        transition: all 0.3s ease;
      }
      .btn-7 span:before {
        width: 2px;
        height: 0%;
      }
      .btn-7 span:after {
        height: 2px;
        width: 0%;
      }
      .btn-7 span:hover:before {
        height: 100%;
      }
      .btn-7 span:hover:after {
        width: 100%;
      }
      
      /* 8 */
      .btn-8 {
        background-color: #f0ecfc;
      background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
        line-height: 42px;
        padding: 0;
        border: none;
      }
      .btn-8 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      .btn-8:before,
      .btn-8:after {
        position: absolute;
        content: "";
        right: 0;
        bottom: 0;
        background: #c797eb;
        /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
                    -4px -4px 6px 0 rgba(116, 125, 136, .2),
          inset -4px -4px 6px 0 rgba(255,255,255,.5),
          inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
        transition: all 0.3s ease;
      }
      .btn-8:before{
         height: 0%;
         width: 2px;
      }
      .btn-8:after {
        width: 0%;
        height: 2px;
      }
      .btn-8:hover:before {
        height: 100%;
      }
      .btn-8:hover:after {
        width: 100%;
      }
      .btn-8:hover{
        background: transparent;
      }
      .btn-8 span:hover{
        color: #c797eb;
      }
      .btn-8 span:before,
      .btn-8 span:after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: #c797eb;
        /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
                    -4px -4px 6px 0 rgba(116, 125, 136, .2),
          inset -4px -4px 6px 0 rgba(255,255,255,.5),
          inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
        transition: all 0.3s ease;
      }
      .btn-8 span:before {
        width: 2px;
        height: 0%;
      }
      .btn-8 span:after {
        height: 2px;
        width: 0%;
      }
      .btn-8 span:hover:before {
        height: 100%;
      }
      .btn-8 span:hover:after {
        width: 100%;
      }
文章标签：
前端开发
游客fz577umxdejsg
目录
相关文章
卓伊凡
|
10月前
|
API Python
【02】优雅草央央逆向技术篇之逆向接口协议篇-以小红书为例-python逆向小红书将用户名转换获得为uid-优雅草央千澈
【02】优雅草央央逆向技术篇之逆向接口协议篇-以小红书为例-python逆向小红书将用户名转换获得为uid-优雅草央千澈
卓伊凡
600 1
Suxiaoxiang
|
存储 前端开发 安全
前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式：Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景，帮助开发者根据登录状态、用户偏好、会话控制等需求，选择合适的存储方案，提升Web应用的性能与安全性。（238字）
Suxiaoxiang
363 0
LiBiGo
|
Linux
【PyAutoGUI操作指南】05 屏幕截图与图像定位：截图+定位单个目标+定位全部目标+灰度匹配+像素匹配+获取屏幕截图中像素的RGB颜色
【PyAutoGUI操作指南】05 屏幕截图与图像定位：截图+定位单个目标+定位全部目标+灰度匹配+像素匹配+获取屏幕截图中像素的RGB颜色
LiBiGo
1705 0
郑小健
|
机器学习/深度学习 监控 算法
Keras进阶：模型调优与部署
该文介绍了Keras模型调优与部署的策略。调优包括调整网络结构（增减层数、改变层类型、使用正则化）、优化算法与参数（选择优化器、学习率衰减）、数据增强（图像变换、噪声添加）、模型集成（Bagging、Boosting）和超参数搜索（网格搜索、随机搜索、贝叶斯优化）。部署涉及模型保存加载、压缩（剪枝、量化、蒸馏）、转换（TensorFlow Lite、ONNX）和服务化（TensorFlow Serving、Docker）。文章强调了持续监控与更新的重要性，以适应不断变化的数据和需求。【6月更文挑战第7天】
郑小健
443 8
游客fz577umxdejsg
|
前端开发
让按钮活起来：常用按钮动画效果，增强网页吸引力！
让按钮活起来：常用按钮动画效果，增强网页吸引力！
游客fz577umxdejsg
258 0
weixin_836869520
|
前端开发 JavaScript UED
使用JavaScript实现滑动动画的几种方法
使用JavaScript实现滑动动画的几种方法
weixin_836869520
302 0
ROCKY_817
|
小程序 前端开发 定位技术
微信小程序-常用的视图容器类组件
该内容是关于微信小程序组件的分类和部分具体组件的介绍。主要分为9大类：视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件、开放能力和无障碍访问。其中详细讲解了`view`、`scroll-view`、`swiper`及`swiper-item`等组件的用途和示例。`view`用于构建页面布局，`scroll-view`支持滚动效果，`swiper`则用于创建轮播图。此外，还提到了`root-portal`、`page-container`等其他特殊用途的组件。
ROCKY_817
286 0
前端老实人
|
JavaScript 前端开发 数据格式
Ant Design Vue 日期选择器，绑定的日期和框内不一致，日期格式化，纠正时差
Ant Design Vue 日期选择器，绑定的日期和框内不一致，日期格式化，纠正时差
前端老实人
1201 0
Ant Design Vue 日期选择器，绑定的日期和框内不一致，日期格式化，纠正时差
前端.火鸡
|
移动开发 前端开发 Windows
前端H5怎么简单的实现复制text内容的操作
前端H5怎么简单的实现复制text内容的操作
前端.火鸡
180 0
前端H5怎么简单的实现复制text内容的操作
Z_B_L
|
前端开发 JavaScript
分享几个精美的网页按钮样式，纯CSS实现，无JS（拿来即用）
分享几个精美的网页按钮样式，纯CSS实现，无JS（拿来即用）
Z_B_L
314 0