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

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%;  
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/20722.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vue + Nodejs + socket.io 实现聊天

Vue + Nodejs + socket.io 实现聊天

Vue 代码 // 安装 socket.io-clientnpm i socket.io-clientimport io from socket.io-client;mounted () {// * location.origin 表示你的 socket 服务地址// * /XXXX/socket.io 表示 你的 socket 在服务器配置的 访问地址let socket io(location.origin, {path: "/XX…
阅读更多...
抓包工具实战

抓包工具实战

Npcap下载&#xff1a; https://npcap.com/#download 安装抓包数据&#xff1a; WinPcap Download python抓包&#xff1a; from scapy.all import * if __name__ __main__:filterstr "tcp || udp"pr sniff(filterfilterstr, count4)
阅读更多...
原生APP开发和Flutter开发的比较

原生APP开发和Flutter开发的比较

原生APP开发和Flutter开发各有优缺点&#xff0c;适用于不同的场景和需求。下面是两者的详细比较&#xff0c;从开发语言、性能、开发效率、维护和更新、社区和支持等多个方面进行分析。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。…
阅读更多...
htb_BoardLight

htb_BoardLight

信息收集 nmap -sSVC 10.10.11.11开放80端口&#xff0c;将boardlight.htb写入/etc/hosts 同步进行子域名和目录扫描 子域名扫不到 这个目录扫描很奇怪哈&#xff0c;明明访问80端口有页面&#xff0c;就是扫不出来 直接浏览器访问80端口&#xff0c;四处看看&#xff0c;发…
阅读更多...
7、架构-架构的安全性

7、架构-架构的安全性

即使只限定在“软件架构设计”这个语境下&#xff0c;系统安全仍然是一 个很大的话题。我们谈论的计算机系统安全&#xff0c;不仅仅是指“防御系统 被黑客攻击”这样狭隘的安全&#xff0c;还至少应包括&#xff08;不限于&#xff09;以下这些问 题的具体解决方案。 认证&am…
阅读更多...
如何实现Java中的单例模式？举例说明。

如何实现Java中的单例模式？举例说明。

Java中的单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供全局访问点。实现单例模式有多种方法&#xff0c;下面介绍几种常见的实现方式。 饿汉式单例&#xff08;Eager Initialization&#xff…
阅读更多...
自定义数据集训练 Yolo V10

自定义数据集训练 Yolo V10

上次介绍了Yolo 推理&#xff0c;本文我们将使用自己的数据集训练 Yolo V10&#xff0c;训练过程简单&#xff1a; 首先准备数据集&#xff0c;包括图片、标注训练推理 数据集准备 本次采用的数据集为内部数据&#xff0c;标注方法为 VOC 格式&#xff0c;首先我们需要建 VO…
阅读更多...
智能辅导班技术架构：运用人工智能提升教育领域的学习效果

智能辅导班技术架构：运用人工智能提升教育领域的学习效果

在教育领域&#xff0c;随着人工智能的发展&#xff0c;智能辅导班逐渐成为一种趋势。它利用先进的技术和创新的教学方法&#xff0c;为学生提供个性化的学习体验和全方位的辅导服务。本文将介绍智能辅导班的技术架构&#xff0c;探讨如何运用人工智能来提升学习效果。 ### 1. …
阅读更多...
力扣之链表专题

力扣之链表专题

1. (LeetCode-21)合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 …
阅读更多...
微服务架构-微服务实施

微服务架构-微服务实施

目录 一、概述 二、微服务拆分 2.1 概述 2.2 拆分原则 2.3 拆分方法 2.3.1 以数据为维度进行拆分 2.3.2 按照使用场景拆分 2.3.3 重要和非重要的拆分 2.3.4 变和不变的拆分 三、微服务通信 3.1 概述 3.2 微服务通信方式选择 3.3 微服务编排 3.4 API接口设计 3.5 …
阅读更多...
「计网」网络初识

「计网」网络初识

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;计网 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 网络初识 &#x1f349;IP 地址 & 端口号&#x1f349;网络协议&#x1f34c;TCP/IP 网络协议 &#x1f349;封装和分用&#x1f349…
阅读更多...
乡村振兴与乡村旅游创新：创新乡村旅游产品，提升旅游服务水平，打造特色乡村旅游品牌，助力美丽乡村建设

乡村振兴与乡村旅游创新：创新乡村旅游产品，提升旅游服务水平，打造特色乡村旅游品牌，助力美丽乡村建设

目录 一、引言 二、乡村旅游产品的创新 &#xff08;一&#xff09;挖掘乡村特色资源 &#xff08;二&#xff09;注重产品体验性 &#xff08;三&#xff09;创新旅游产品形态 三、旅游服务水平的提升 &#xff08;一&#xff09;加强基础设施建设 &#xff08;二&…
阅读更多...
如何上传模型素材创建3D漫游作品？

如何上传模型素材创建3D漫游作品？

一、进入3D空间漫游互动工具编辑器 进入720云官网-点击“开始创作”-选择3D空间漫游-进入到作品创建页面。 二、上传模型及素材&#xff0c;创建生成3D空间漫游模型 1.创建3D空间作品&#xff1a;您可以选择新建空白作品或使用720云提供的预设空间模板&#xff0c;本篇主要介绍…
阅读更多...
[手游] Florence逝去的爱弗洛伦斯

[手游] Florence逝去的爱弗洛伦斯

图片处理工具箱Hummingbird : Hummingbird使用智能压缩技术来减少文件的大小&#xff0c;支持&#xff1a;jpg、png、webp、svg、gif、gif、css、js、html、mp4、mov&#xff0c;可以设置压缩的同时等比例缩放图片或视频的尺寸。可以拖放文件夹压缩&#xff0c;一次最多可处理1…
阅读更多...
redis（16）：Redis的BigKey问题以及解决方案

redis（16）：Redis的BigKey问题以及解决方案

1 什么是BigKey问题 在Redis中，每个Key都会对应一个Value，而这个Value的大小会影响Redis的性能表现。当我们存储的Value特别大时，就会出现BigKey问题。比如，在我们的互联网系统中，需要保存用户最新1万个粉丝的业务，或者一个用户的个人信息缓存，里面包括了基本资料、关系…
阅读更多...
docker运行python项目

docker运行python项目

python项目结构 pythondocker/ │ ├── README.md # 项目说明文件 ├── setup.py # 用于安装项目的Python脚本 ├── requirements.txt # 项目依赖列表 ├── .gitignore # Git 忽略文件配置 ├── .env # 环境变量配置文件…
阅读更多...
【vue3 + Echarts 】中国地图省市区下钻，并返回上级

【vue3 + Echarts 】中国地图省市区下钻，并返回上级

实现效果如果&#xff1a; echarts版本&#xff1a; 地图数据来源&#xff1a;阿里云数据可视化平台 代码 <template><div class"mapWrapper"><a-button type"primary" click"goBack">返回上级</a-button><div…
阅读更多...
一步步实现知乎热榜采集：Scala与Sttp库的应用

一步步实现知乎热榜采集：Scala与Sttp库的应用

背景 在大数据时代&#xff0c;网络爬虫技术发挥着不可或缺的作用。它不仅能够帮助我们快速地获取互联网上的信息&#xff0c;还能处理和分析这些数据&#xff0c;为我们提供深刻的洞察。知乎&#xff0c;作为中国领先的问答社区&#xff0c;汇聚了各行各业的专家和广大用户的…
阅读更多...
深入解析力扣172题：阶乘后的零（计算因子5的方法详解及模拟面试问答）

深入解析力扣172题：阶乘后的零（计算因子5的方法详解及模拟面试问答）

在本篇文章中&#xff0c;我们将详细解读力扣第172题“阶乘后的零”。通过学习本篇文章&#xff0c;读者将掌握如何使用多种方法来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释和ASCII图解&#xff0c;以便于理解。 问题描述 …
阅读更多...
【LeetCode刷题】二分查找：寻找旋转排序数组中的最小值、点名

【LeetCode刷题】二分查找：寻找旋转排序数组中的最小值、点名

【LeetCode刷题】Day 14 题目1&#xff1a;153.寻找旋转排序数组中的最小值思路分析&#xff1a;思路1&#xff1a;二分查找&#xff1a;以A为参照思路2&#xff1a;二分查找&#xff0c;以D为参照 题目2&#xff1a;LCR 173.点名思路分析&#xff1a;思路1&#xff1a;遍历查找…
阅读更多...
最新文章

Copyright @ 2022~2023