AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

鼠标滑过，酷炫来袭：探索网页设计中的按钮动画魔法！

2024-08-22 23
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 鼠标滑过，酷炫来袭：探索网页设计中的按钮动画魔法！

先上效果



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



完整代码


以下是完整代码：

HTML:

<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>

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%;
      }
文章标签：
前端开发
游客fz577umxdejsg
目录
相关文章
亚丁号
|
4月前
|
移动开发 JavaScript 前端开发
分享86个鼠标特效，总有一款适合您
分享86个鼠标特效，总有一款适合您
亚丁号
67 1
分享86个鼠标特效，总有一款适合您
亚丁号
|
4月前
|
移动开发 JavaScript 前端开发
分享76个鼠标特效，总有一款适合您
分享76个鼠标特效，总有一款适合您
亚丁号
103 7
亚丁号
|
4月前
|
移动开发 JavaScript 前端开发
分享88个鼠标特效，总有一款适合您
分享88个鼠标特效，总有一款适合您
亚丁号
55 3
VipSoft
|
1月前
如何删除PPT中工具栏口袋动画
如何删除PPT中工具栏口袋动画
VipSoft
27 0
疯狂的猿
|
2月前
超好看的鼠标指针 折纸Gami
折纸风格的鼠标指针、共九种颜色风格：白、橙、粉、红、黄、蓝、绿、青、紫；三种尺寸：X32、X48、X64；一般情况下100%DPI推荐使用X48、大于125%DPI推荐使用X64版本！
疯狂的猿
56 6
写代码的大学生
|
3月前
|
前端开发
CSS动画效果（鼠标滑过按钮动画）
CSS动画效果（鼠标滑过按钮动画）
写代码的大学生
26 1
写代码的大学生
|
3月前
|
前端开发
CSS动画（毛玻璃按钮）
CSS动画（毛玻璃按钮）
写代码的大学生
28 1
王同学睡醒了
|
9月前
|
前端开发
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果
王同学睡醒了
48 0
鑫鑫子
|
10月前
|
前端开发
css3制作鼠标悬浮图文动画效果
css3制作鼠标悬浮图文动画效果
鑫鑫子
46 0
Clover&lsquo;sBlog
|
前端开发
【CSS动画05--闪亮的玻璃图标悬浮效果】
【CSS动画05--闪亮的玻璃图标悬浮效果】
Clover&lsquo;sBlog
68 1