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. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  2. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  3. CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  4. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  5. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  6. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  7. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  8. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  9. [Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

    转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮 ...

  10. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

随机推荐

  1. Superset导航栏高亮问题处理

    在superset => templates => appbuilder 文件夹下找到 navbar.html 如果没有可对应新建,navbar.html内容如下 {% set menu ...

  2. ZABBIX Maps（拓扑图） 数据可视化

    本篇文章将介绍如何利用zabbix内置 Maps模块展示主机数据指标以及如何关联触发器 构建业务地图让异常指标更加直观呈现 下面我将从网络设备.服务器和vmware esxi和IP主机去为大家解析za ...

  3. 旧笔记本安装Win8.1实录

    昨天发现一台尘封已久的Lenovo ideapad Y550,给它装上了Windows 10 然后第二天系统挂掉了 挂的原因是半夜万恶之源Windows更新开始造孽了 刚好没电 文件全坏了 真 解除封 ...

  4. NVM 使用

    NVM(Node Version Manager)是 Node.js 的版本管理工具. NVM 项目为 macOS 和 Linux 开发.Windows 用户需要使用 NVM for Windows. ...

  5. Kubernetes-8：Deployment、DaemonSet、Job、CronJob等各控制器介绍及演示

    前文中也都已经提及过k8s都有哪些常用的控制器,本文对这些控制器进行细剖及演示一下 RS与RC与Deployment关联 RC主要作用就是用来确保容器应用副本数保持用户的期望值数目,即如果有pod异常 ...

  6. Android 执行shell命令 非root

    一个开源的项目已经完成了这个功能 app_process-shell-use,这个项目网上讲解的,很多,我这边就把操作时一些简要步骤说明一下 但是该方式有缺点:必须要先USB连接,debug的时候,运 ...

  7. OpenCV开发笔记（八十）：基于特征点匹配实现全景图片拼接

    前言   一个摄像头视野不大的时候,我们希望进行两个视野合并,这样让正视的视野增大,从而可以看到更广阔的标准视野.拼接的方法分为两条路,第一条路是Sticher类,第二条思路是特征点匹配.  本篇使用 ...

  8. DB\redis\zookeeper分布式锁设计

    redis 参考目录: 生产级Redis 高并发分布式锁实战1:高并发分布式锁如何实现 https://www.cnblogs.com/yizhiamumu/p/16556153.html 生产级Re ...

  9. 在 Web 中判断页面是不是刷新

    在 Web 开发中,我们经常需要区分用户是否通过刷新操作重新加载了页面.这一操作可能是由用户手动刷新(如按下 F5 键或点击浏览器刷新按钮)或通过浏览器自动重新加载.判断页面是否刷新有助于开发者优化用 ...

  10. C#阿里境外服务器部署企业邮箱发邮件代码

    static string accountName = "发件人邮箱"; static string password = "发件人邮箱密码"; static ...