CSS3按钮小动画

最新推荐文章于 2024-06-01 17:33:11 发布
最新推荐文章于 2024-06-01 17:33:11 发布
阅读量320 收藏 1
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37397742/article/details/107042083
版权

本来的样式
未hover时的样式
hover后的样式
hover以后

<body>
  <a href="">Button</a>
  <a href="">Button</a>
  <a href="">Button</a>
</body>

body {
      background: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    a {
      position: relative;
      text-decoration: none;
      width: 10rem;
      height: 4rem;
      text-align: center;
      line-height: 4rem;
      margin-right: 5rem;
      color: turquoise;
      overflow: hidden;
      text-transform: uppercase;
      transition: 0.5s;
    }

    a::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2rem;
      height: 2rem;
      border-top: 1px solid aqua;
      border-left: 1px solid aqua;
      transition: 0.5s ease-in;
      transition-delay: 0.5s;
    }

    a::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 2rem;
      height: 2rem;
      transition: 0.5s ease-in;
      transition-delay: 0.5s;
    }

    a:nth-child(1) {
      color: thistle;
    }

    a:nth-child(2) {
      color: rgb(125, 108, 172);
    }

    a:nth-child(3) {
      color: rgb(214, 173, 118);
    }

    a:nth-child(1)::after {
      border-right: 1px solid thistle;
      border-bottom: 1px solid thistle;
    }

    a:nth-child(2)::after {
      border-right: 1px solid rgb(125, 108, 172);
      border-bottom: 1px solid rgb(125, 108, 172);
    }

    a:nth-child(3)::after {
      border-right: 1px solid rgb(214, 173, 118);
      border-bottom: 1px solid rgb(214, 173, 118);
    }

    a:hover {
      background-color: aqua;
      color: #fff;
    }

    a:nth-child(1):hover {
      background-image: linear-gradient(to bottom right, aqua, thistle);
      box-shadow: 0 0 40px thistle;
      transition-delay: 0.5s;
    }

    a:nth-child(2):hover {
      background-image: linear-gradient(to bottom right, aqua, rgb(125, 108, 172));
      box-shadow: 0 0 50px rgb(125, 108, 172);
      transition-delay: 0.5s;
    }

    a:nth-child(3):hover {
      background-image: linear-gradient(to bottom right, aqua, rgb(214, 173, 118));
      box-shadow: 0 0 50px rgb(214, 173, 118);
      transition-delay: 0.5s;

    }

    a:hover::before {
      width: 100%;
      height: 100%;
      transition-delay: 0s;
    }

    a:hover::after {
      width: 100%;
      height: 100%;
      transition-delay: 0s;
    }
圆媛吖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端必学的CSS制作Switch动画开关按钮演示
风中追风
02-16 5477
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮选择处，给页面增加一点活泼的气息~
css3动画与动效--按钮元素动画效果
Summer_JX的博客
11-21 4264
css3动画与动效 1.按钮元素动画效果  例：鼠标移到链接上从白色慢慢过渡到黑色-----运用transition：all .5s;当超链接元素中任何属性发生变化，都以动画形式呈现，动画的时间为0.5s; this is a link 样式： a{ color:#fff; text-decoration:none; font-family:
CSS篇之分享动画按钮
ae_pppppp的博客
03-01 116
动画按钮
CSS动画效果（鼠标滑过按钮动画）
最新发布
2303_82176667的博客
06-01 631
网页设计中的按钮不仅是用户交互的桥梁，更是展示创意和技术的平台。酷炫的鼠标经过动画效果能够显著提升按钮的吸引力，激发用户的点击欲望，从而增加用户参与度。本文将介绍几种常用且引人注目的CSS按钮动画效果。
8种CSS3按钮动画特效【附源码】
web前端开发
10-27 3139
这8款CSS3按钮动画特效。在该特效中，提供了8种按钮动画效果。每种动画在鼠标悬停到按钮上面的时候，都会触发按钮动画。动画效果截图：使用方法HTML结构最简单的按钮HT...
css3按钮渐变动画特效
07-24
本文将详细解析"css3按钮渐变动画特效"这一主题，包括如何利用CSS3来创建具有炫彩动画效果的按钮，以及实现鼠标悬停时流光渐变的技巧。 首先，CSS3的渐变功能是通过`background-image`属性来实现的，它可以创建线性...
纯CSS3动画按钮
06-12
纯CSS3动画按钮是网页设计中的一个重要元素，它利用了CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），来实现丰富的交互效果，提升用户体验。下面将详细介绍这些知识点。 1. CSS3...
css3 transition按钮动画特效
06-24
在本文中，我们将深入探讨CSS3中的`transition`属性及其在创建按钮动画特效中的应用。CSS3是现代网页设计的核心技术之一，它引入了许多新特性，使得网页元素的交互性和视觉效果大大提升。`transition`属性是其中之一...
6种非常炫酷的CSS3按钮边框动画特效
09-24
**CSS3按钮边框动画特效详解** 在网页设计中，按钮是不可或缺的交互元素，而使用CSS3可以创建出各种动态、吸引人的视觉效果。本文将深入探讨一款独特的CSS3按钮边框动画特效，它提供了6种不同风格的边框动画，让...
CSS3分享图标按钮过渡动画特效
07-28
在现代网页设计中，视觉效果和用户体验是至关重要的元素，CSS3分享图标按钮过渡动画特效便是其中一种增强网站吸引力和互动性的技术。本特效主要利用CSS3的强大功能，特别是其过渡（transition）和动画（animation）...
最强9种css3圆形按钮hover鼠标经过动画效果
08-10
只要很少的资源分，不要花钱买
几种气泡按钮样式CSS3
09-25
简单易用，体积小，移植方便，有喜欢的可以下载使用。简单易用，体积小，移植方便，有喜欢的可以下载使用。简单易用，体积小，移植方便，有喜欢的可以下载使用
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
css3动画按钮_使用CSS3创建奇妙的动画按钮
cuken7684698822的博客
08-02 370
css3动画按钮How to Create a Pure CSS3 animated buttons Today I want to share some experience with creating interactive animated elements (buttons) with CSS3. In our example I going to use hover and active...
CSS3实现发光按钮效果动画
CodingNoob
09-01 2419
在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变...
CSS 实现按钮点击动效的套路
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-19 3681
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌特殊或者满足特殊功能，可能需要给按钮添加一点点击动效。比如，用...
CSS按钮动画(一)
俊而不逊的博客
01-07 3844
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 我们分析一下，其实无非就是鼠标移入和鼠标移走的CSS的样式 废话不多说，咱们直接上代码就完了 html代码 <body> <div class="abc"> <div> <button class="btn btn-1 btn-1a">hello world</button> ...
css3 - 按钮元素动画效果
erdouzhang
05-08 521
在线演示当鼠标指针滑过按钮时，按钮左侧内边距减小，使文字从右侧移动到左侧，并将背景颜色更改。同时，也为鼠标指针滑过状态下的i图标设置了新的属性状态，使得图标向右移动，停止在与右侧的距离等于整体宽度的5%的位置。如图： 引入图标文件：<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html:<button>
最简单的css3按钮动画
SFwords的博客
02-06 708
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> Document #box input { display: block; mar
css按钮点击动画效果
05-18
以下是一个简单的 CSS 按钮点击动画效果： ```html <button class="btn">Click me</button> ``` ```css .btn { display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; transition: width 0.3s ease, height 0.3s ease; } .btn:hover::before { width: 300px; height: 300px; } .btn:active::before { width: 500px; height: 500px; transition: width 1s ease, height 1s ease; } ``` 在这个示例中，我们使用伪元素 `::before` 来创建一个圆形的背景，并将其位置设置在按钮的中心。然后，我们通过鼠标悬停和点击事件来改变这个圆形背景的大小和颜色。 当用户悬停在按钮上时，我们使用 `:hover` 伪类来缩放圆形背景。当用户点击按钮时，我们使用 `:active` 伪类来进一步放大圆形背景，并将过渡时间延长以产生更明显的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值