CSS动画效果（鼠标滑过按钮动画）

于 2024-06-01 17:33:11 发布
阅读量602 收藏 5
点赞数 9
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_82176667/article/details/139376921
版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa5SXiaicFfsrcric7TJmGO6YddqC4wFPdM7PGzPHuFgvtDS7MIvnLHB4WFaKia0Qh8VCyUaoyHMc2Zltg/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

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

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <link rel="stylesheet" type="text/css" href="6_1.css">  
</head>  
<body>  
<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>  
</body>  
</html>

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%;  
}
写代码的大学生
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
简洁的纯css3鼠标滑过按钮动画过滤样式
09-08
"简洁的纯css3鼠标滑过按钮动画过滤样式"是一个利用CSS3特性实现的交互效果，它使得网页上的按钮在用户鼠标滑过时能呈现出动态的过滤效果，增加了用户体验的趣味性和互动性。 首先，我们要理解CSS3中的关键帧动画...
纯CSS3鼠标滑过按钮动画过滤特效
易兒善
03-23 667
效果在线演示：点击这里 下载地址：http://download.csdn.net/download/yiershan1314/9791973
使用css及动画实现按钮的动态效果
weixin_64974855的博客
04-18 677
使用css及动画实现按钮的动态效果
92款超级漂亮的css按钮样式 复制即用
十一月廿七风雨大作
01-10 1万+
样式如图，代码已在结尾，按照序号复制粘贴便可直接用了：代码：
几个实用又好看的纯css 按钮样式
热门推荐
qq_43682422的博客
08-04 2万+
几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;
CSS动画按钮实例
six6de6的博客
07-14 1385
十分钟学会炫酷按钮
CSS按钮样式
南明离火的博客
07-01 9705
CSS按钮样式
纯CSS3鼠标滑过动画按钮特效.zip
07-11
当鼠标滑过按钮时，通过修改类的选择器，触发transition属性，实现按钮样式的平滑变化。这些变化可能包括颜色、大小、边框宽度、背景色等。 例如，我们可以这样定义一个按钮的初始样式和鼠标悬停时的样式： ```css...
简单css3鼠标滑过按钮背景动画特效
09-08
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标滑过按钮时的背景动画特效。这个特效可以极大地提升用户体验，使用户在与页面交互时感受到更加生动和动态的效果。...
最全面的CSS3鼠标滑过动画按钮集锦
11-24
例如，当鼠标滑过按钮时，按钮的颜色、大小或透明度可以逐渐改变，而不是立即切换。这可以通过`transition`属性设置，指定要过渡的属性、持续时间、延迟以及过渡方式（线性、ease-in-out等）。 2. **Animations...
css_按钮_Button_样式
weixin_42786460的博客
09-01 3137
css_按钮_Button_样式
按钮css动画（分享）
qq_66839130的博客
08-11 408
CodePen（代码笔）一款前端所见即所得的工具，我们可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。CodePem 主要功能即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。快速添加外部资源文件。只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。免费创建模板。支持创建三个模板，不是每个作品都需要从白板开始。优秀的外嵌体验。
CSS按钮动画(一)
俊而不逊的博客
01-07 3837
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 我们分析一下，其实无非就是鼠标移入和鼠标移走的CSS的样式 废话不多说，咱们直接上代码就完了 html代码 <body> <div class="abc"> <div> <button class="btn btn-1 btn-1a">hello world</button> ...
H5 页面36种漂亮的CSS3网页按钮Button样式
weixin_43617604的博客
11-29 9755
h5相关特效source 点击查看 36种漂亮的CSS3网页按钮Button样式 效果图 代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style t...
WEB：伪元素应用1：给按钮换颜色加简单动画效果（CSS）
weixin_50517811的博客
06-15 626
伪元素应用1：给按钮换颜色加简单动画效果（CSS），增加可重复使用的类 .btn，完成背景色变化动画效果。
按钮（秒懂CSS按钮的使用）
最新发布
百赢出品，必属精品
04-20 1626
按钮是网页中的一个可点击元素，通常用于执行特定的动作或操作。它可以是文本、图标或两者的组合，并且可以添加样式以符合网页的设计需求。按钮是网页和应用程序界面中常见的交互元素，用于触发特定的操作或执行特定的功能。交互性: 按钮是用户与界面进行交互的主要手段之一，用户通过点击按钮来执行特定的操作。可视化: 按钮通常具有明显的外观，以吸引用户的注意力，并且可以通过颜色、形状等视觉元素来传达信息。反馈: 当用户与按钮进行交互时，通常会提供反馈以指示操作的状态，例如按钮的状态变化、动画效果或者提示信息。功能性。
css实现按钮边框动画
06-02 278
【代码】css实现按钮边框动画。
用css实现简单的点击按钮动态效果
Howl1234的博客
03-20 1452
用css实现简单的点击按钮动态效果
css鼠标悬停动画效果
10-16
在web项目开发中，我们可以使用纯CSS实现鼠标悬停动画效果。具体实现方法可以参考引用中的内容。通过设置:hover伪类和transition属性，我们可以实现鼠标悬停时元素的动画效果。同时，我们也可以使用CSS动画库，如Animate.css，来实现更加复杂的鼠标悬停动画效果。如果您想深入了解CSS动画的实现原理，可以参考引用中的前端面试题库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写代码的大学生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值