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. vue之事件监听v-on

    1.背景 2.简单使用 2.1.做一个简单的点击计数器 <!DOCTYPE html> <html lang="en" xmlns:v-on="http ...

  2. 二分答案&前缀和&差分&离散化（简记）

    二分答案 基本code int Find(int l,int r) { int ans,mid; while(l<=r) { int mid=l+r>>1; if(Check(mid ...

  3. VideoGeneration

    Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets 主要贡献:设计了一套数据清洗策略来清洗大 ...

  4. SMU Summer 2024 Contest Round 7

    SMU Summer 2024 Contest Round 7 Make Equal With Mod 题意 给定一个长度为 \(n\) 的数列 \(a\).你可以执行若干次操作,每次操作选择一个大于 ...

  5. 微服务全链路跟踪：grpc集成zipkin

    微服务全链路跟踪:grpc集成zipkin 微服务全链路跟踪:grpc集成jaeger 微服务全链路跟踪:springcloud集成jaeger 微服务全链路跟踪:jaeger集成istio,并兼容u ...

  6. 【CMake系列】07-export与find

    为了将我们的库文件更方便地提供给他人使用,cmake 提供了一种方式,通过查找 .cmake 文件,将库导入项目中. 本节学习的内容,就是将我们的库导出一个 xxx.cmake 文件,以及 在项目中导 ...

  7. 【团队建设】如何做好团队开发中的 CodeReview（代码评审）？

    目录 前言 一.为什么要做 二.有哪些好处 三.具体怎么做 3.1评审条件 3.2评审重点 3.3评审形式 四.还可以怎么做 4.1提出亮点 4.2轮流评审 4.2文档沉淀 五.文章小结 前言 你是否 ...

  8. Ubuntu 安装基于 DEB 的 Firefox

    自从 Canonical 推出了 Snap 之后,在所有新推出的 Ubuntu 发行版中都预装了 Snap 版的 Firefox,并将 APT 中的 Firefox 包指向了 Snap 的 Firef ...

  9. get方法传参后端接收数据异常 - 特殊字符需转义

    get方法传参的时候,如果有特殊字符,如 + 等,无法被识别,导致后端处理异常,所以,get方式,如果有特殊字符,需要转义后再请求接口 1.java 特殊字符转义 URLEncoder.encode( ...

  10. C语言三子棋

    话说自从大一学C语言后用C语言的巅峰也就是第十二届蓝桥杯了,后续开发什么的都是用的java,搞开发java这样的面向对象语言确实用着更顺手方便点.不过C语言YYDS,"C生万物"嘛 ...