当前位置：首页 > news >正文

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

news 2025/8/27 19:25:29

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

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

1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa5SXiaicFfsrcric7TJmGO6YddqC4wFPdM7PGzPHuFgvtDS7MIvnLHB4WFaKia0Qh8VCyUaoyHMc2Zltg/640?wx_fmtgif&fromappmsg&tpwebp&wxfrom5&wx_lazy1&wx_co1 网页设计中的按钮不仅是用户交互的桥梁&#…...

编程日记 2024/6/2 19:18:32

数据结构（C）：从初识堆到堆排序的实现

目录 🌞0.前言 🚈 1.堆的概念 🚈 2.堆的实现 🚝2.1堆向下调整算法 🚝2.2堆的创建（堆向下调整算法） ✈️2.2.1 向下调整建堆时间复杂度 🚝2.3堆向上调整算法 🚝2.…...

编程日记 2024/6/2 19:17:30

ChatGLM3-6B部署

ZhipuAI/chatglm3-6b 模型文件地址 chatglm3-6B-32k-int4 量化的模型地址 ChatGLM3 代码仓库 ChatGLM3 技术文档 cpolar http xxx 端口 /anaconda3/envs/chatglm2/lib/python3.8/site-packages/gradio$ networking.py 硬件环境最低要求： 为…...

编程日记 2024/6/2 19:16:29

代码随想录35期Day54-JavaScript

Day54题目 ### LeetCode739每日温度核心思想:今天主要是学会单调栈的使用.找到比元素更大的下一个元素,如果比栈顶元素小就入栈,否则就出栈顶元素,当前元素就是比栈顶元素大的"下一个更大的元素". /*** param {number[]} temperatures* return {number[]}*/ var …...

编程日记 2024/6/2 19:14:26

把自己的服务器添加到presearch节点

Presearch is a scam. Before, judging by the price of the token you should have been able to get between $150-$200 after 12-13 months of regular searches. "If you use this service for the next 11 years you will have earned $30!" Presearch大约需要…...

编程日记 2024/6/2 19:13:25

Open3D(C++) OTSU点云二值化

目录一、算法原理二、代码实现三、结果展示1、原始点云2、二值化本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。一、算法原理最大类间方差法（Between-class scatter method）是一种用于分割的方法，它通过计算图…...

编程日记 2024/6/2 19:11:23

浔川python社获得全网博主原力月度排名泸州地区第二名！

今日，浔川python社在查看全网博主原力月度排名泸州地区时，一看就震惊啦！ 全网博主原力月度排名泸州地区排名榜单全网博主原力月度排名泸州地区第二名为：浔川python社。感谢粉丝们的支持！浔川python社还会继续努力&a…...

编程日记 2024/6/2 19:10:21

第二站：Java——集合框架的深邃海洋（续）

### Java——集合框架的深邃海洋（续） 在我们的Java集合框架探索之旅中，我们已经涉足了基本操作、高级特性，现在让我们深入探讨一些特定场景下的应用和进阶技巧，比如集合的分区操作、分组、并行流的性能考量&#xff0…...

编程日记 2024/6/2 19:09:20

linux系统下，mysql增加用户

首先，在linux进入mysql mysql -u root -p 然后查看当前用户： select user,host from user; 增加用户语句： CREATE USER 用户名host范围 IDENTIFIED BY 密码;...

编程日记 2024/6/2 19:08:19

Java数据结构与算法(最长回文子串中心扩散法)

前言回文子串是练习数据结构和算法比较好的使用场景，可以同时练习到双指针、动态规划等一些列算法。实现原理中心扩散算法实现。这里定义最长回文子串长度的大小为maxLen，起点位置为0. 奇数个数为中心点和偶数个数为中心点分别计算回文长度大小。…...

编程日记 2024/6/2 19:07:18

基于Python网络招聘数据可视化分析系统的设计与实现

基于Python网络招聘数据可视化分析系统的设计与实现 Design and Implementation of Python-based Network Recruitment Data Visualization Analysis System 完整下载链接:基于Python网络招聘数据可视化分析系统的设计与实现文章目录基于Python网络招聘数据可视化分析系统的…...

编程日记 2024/6/2 19:06:15

【Linux】Linux工具——gcc/g++

1.使用vim更改信用名单——sudo 我们这里来补充sudo的相关知识——添加信任白名单用户使用sudo就必须将使用sudo的那个账号添加到信用名单里，而且啊，只有超级管理员才可以添加信用名单在/etc/sudoers里我们发现它的权限只是可读啊，所以…...

编程日记 2024/6/2 19:04:13

【惯性传感器imu】—— WHEELTEC的惯导模块的imu的驱动安装配置和运行

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、IMU驱动安装1. 安装依赖2. 源码的下载3. 编译源码(1) 配置固定串口设备(2) 修改luanch文件(3) 编译二、启动IMU1. 运行imu2. 查看imu数据总结前言 WHEE…...

编程日记 2024/6/2 19:03:11

Linux提权一

#信息收集当前主机的操作系统 hostnamectl cat /etc/*-release lsb_release -a cat /etc/lsb-release # Debain cat /etc/redhat-release # Redhat cat /etc/centos-release # Centos cat /etc/os-release # Ubuntu cat /etc/issue 当前主机的内核版本 hostnamectl uname -a …...

编程日记 2024/6/2 19:01:09

Vue.js中如何实现以列表首列为表头

前言一般情况table列表的展示，列头都在第一横行，此方法用于列头在第一列的情况。效果图核心代码 <template><div><table class"data-table"><tr v-for"(column, columnIndex) in columns" :key"col…...

编程日记 2024/6/2 18:57:04

如果孙宇晨和贾跃亭能够握手，或许将会上演新的戏码

就在贾跃亭宣布将进行个人IP的商业化不久，便迎来了回应，并且这一次给予贾跃亭回应的，同样是一个颇具争议性的人物——孙宇晨。根据孙宇晨最新发布的视频显示，他愿意投资贾跃亭「做一个新的个人IP化的公司」，并且将会…...

编程日记 2024/6/2 18:55:02

渲染100为什么是高性价比网渲平台？渲染100邀请码1a12

市面上主流的网渲平台有很多，如渲染100、瑞云、炫云、渲云等，这些平台各有特色和优势，也都声称自己性价比高，以渲染100为例，我们来介绍下它的优势有哪些。 1、渲染100对新用户很友好，注册填邀请码1a12有3…...

编程日记 2024/6/2 18:54:00

Jenkins流水线pipeline--基于上一章的工作流程

1流水线部署 1.流水线文本名Jenkinsfile,将流水线放入gitlab远程仓库代码里面 2pipeline脚本 Jenkinsfile文件内容 pipeline {agent anyenvironment {key"value"}stages {stage("拉取git仓库代码") {steps {deleteDir()checkout scmGit(branches: [[nam…...

编程日记 2024/6/2 18:51:59

比较Rust和Haskel

在比较Rust和Haskell时，我们可以从多个维度来分析它们各自的优势。以下是Rust相对于Haskell的优势，以及Haskell相对于Rust的优势： Rust比Haskell强的方面： 内存安全与并发性： Rust通过独特的所有权系统和借用检查器在…...

编程日记 2024/6/2 18:50:57

RedisTemplate的Long类型使用increment自增报错

问题描述代码如下 Resourceprivate RedisTemplate<String,String > redisTemplate;redisTemplate.opsForValue().set("testKey", 0L); redisTemplate.opsForValue().increment("testKey");工作里用Long类型存储评论数，在使用increment自…...

编程日记 2024/6/2 18:49:55

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/8/4 18:55:37

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/8/11 21:47:18

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/7/20 11:15:04

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/7/5 11:09:46

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法：原理、应用与企业场景高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...

编程新知 2025/8/24 17:55:00

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/8/19 16:14:29

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。我们可以考虑用CNN来替代RNN，但是…...

编程新知 2025/8/27 16:29:36

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/8/19 13:48:59

1.整体效果

2.完整代码

相关文章：