CSS3 动画按钮

原创 已于 2025-06-27 15:06:47 修改 · 811 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #css

于 2025-05-09 17:46:53 首次发布

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS3 动画按钮</title>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background-color: #f5f5f5;

            margin: 0;

        }

       

        .button-container {

            text-align: center;

        }

       

        .animated-button {

            position: relative;

            display: inline-block;

            padding: 15px 30px;

            color: #fff;

            background: linear-gradient(45deg, #ff3366, #ba265d);

            border: none;

            border-radius: 50px;

            font-size: 18px;

            font-weight: bold;

            text-transform: uppercase;

            letter-spacing: 1px;

            cursor: pointer;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(186, 38, 93, 0.4);

            transition: all 0.3s ease;

        }

       

        .animated-button:hover {

            transform: translateY(-3px);

            box-shadow: 0 8px 20px rgba(186, 38, 93, 0.6);

        }

       

        .animated-button:active {

            transform: translateY(1px);

        }

       

        .animated-button::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

            transition: 0.5s;

        }

       

        .animated-button:hover::before {

            left: 100%;

        }

       

        .animated-button span {

            position: relative;

            z-index: 1;

        }

       

        /* 脉冲动画 */

        @keyframes pulse {

            0% {

                transform: scale(1);

                opacity: 1;

            }

            50% {

                transform: scale(1.05);

                opacity: 0.8;

            }

            100% {

                transform: scale(1);

                opacity: 1;

            }

        }

       

        .pulse-button {

            animation: pulse 2s infinite;

        }

       

        /* 旋转动画 */

        .rotate-button {

            transition: transform 0.5s ease;

        }

       

        .rotate-button:hover {

            transform: rotate(360deg);

        }

       

        /* 边框动画 */

        .border-button {

            background: transparent;

            color: #ff3366;

            border: 2px solid #ff3366;

            transition: all 0.3s ease;

        }

       

        .border-button:hover {

            background: #ff3366;

            color: white;

        }

       

        /* 更多信息链接 */

        .info-link {

            display: block;

            margin-top: 30px;

            color: #666;

            text-decoration: none;

            font-size: 14px;

            transition: color 0.3s;

        }

       

        .info-link:hover {

            color: #ff3366;

        }

    </style>

</head>

<body>

    <div class="button-container">

        <button class="animated-button">

            <span>点击按钮</span>

        </button>

       

        <button class="animated-button pulse-button" style="margin-left: 20px;">

            <span>脉冲效果</span>

        </button>

       

        <button class="animated-button rotate-button" style="margin-left: 20px; background: linear-gradient(45deg, #3498db, #2980b9); box-shadow: 0 5px 15px rgba(41, 128, 185, 0.4);">

            <span>旋转效果</span>

        </button>

       

        <button class="animated-button border-button" style="margin-left: 20px; box-shadow: none;">

            <span>边框动画</span>

        </button>

       

    </div>

</body>

</html>

ziblog
关注
超炫酷且实用的CSS3按钮动画
HsvvDatabase的博客
09-19 600
通过应用CSS3动画，我们可以为按钮增添一些炫酷的效果，提升用户体验并吸引他们的注意力。本文将介绍一些令人印象深刻的CSS3按钮动画效果，并提供相应的源代码供您参考和使用。通过应用这些CSS3按钮动画效果，您可以为您的网页增添一些令人印象深刻的交互效果。当用户将鼠标悬停在按钮上时，按钮会平滑地放大，释放鼠标时则恢复原始大小。这种效果通过使用CSS3的渐变背景色和过渡效果实现。当用户将鼠标悬停在按钮上时，按钮会沿顺时针方向平滑地旋转一定角度。这种效果通过CSS3的关键帧动画和过渡效果实现。
css 按钮动画
PrimaryColor
12-17 424
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ .
css动画按钮2
12-03
css动画按钮
CSS按钮动画(三)
俊而不逊的博客
01-11 1311
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题 废话就不多说，咱们直接上代码，干就完了！！！ html代码 <body> <div class="abc"> <div> <button class="btn btn-1 btn-1d">hello ...
CSS3按钮动画
bossmango的博客
09-05 394
这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。 在线演示源码下载 让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是
水波扩散CSS3动画按钮特效代码
03-20
"水波扩散CSS3动画按钮特效代码"是一个利用CSS3特性实现的独特交互设计，为用户提供了视觉上的吸引力和良好的用户体验。 首先，这个特效的核心在于模拟水波扩散的效果。当用户点击按钮时，就像投掷一颗石子到水中，...
水波扩散CSS3动画按钮代码
06-24
本文将深入探讨“水波扩散CSS3动画按钮代码”，这是一种创新的按钮设计，它在用户点击时会呈现出水波扩散的效果，既美观又具有用户体验的提升作用。 首先，我们要理解CSS3的核心特性之一是其动画功能，通过`@...
CSS3动画按钮导航菜单特效.rar
06-23
CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效.rar CSS3动画按钮导航菜单特效....
《5种超炫纯CSS3动画按钮特效展示》
最新发布
08-05
我们将围绕“纯CSS3动画按钮效果 5种漂亮样式”这一主题，讨论如何利用这些特性来设计吸引用户的按钮。 CSS3中的关键帧动画（@keyframes）是实现按钮动画的核心工具。通过定义动画的不同阶段，我们可以控制按钮在...
纯CSS3动画按钮
06-12
纯CSS3动画按钮是网页设计中的一个重要元素，它利用了CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），来实现丰富的交互效果，提升用户体验。下面将详细介绍这些知识点。 1. CSS3...
css3实现动画按钮.rar
07-05
css3实现动画按钮
CSS3按钮炫酷动画hover样式
10-25
CSS3按钮炫酷动画hover样式，
switch按钮文字切换
Mr_yq的博客
09-27 1382
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body{background: rgb(57, 179, 255)} label { display: b...
CSS按钮动画
fastrack_15233866884的博客
03-24 405
btn-default：基本样式按钮 btn-primay：蓝色按钮 btn-success：绿色按钮 btn-error：红色按钮 btn-warning：黄色按钮 btn-anim1：按钮爆炸动画效果 btn-anim2：按钮左到右动画效果 btn-anim3：按钮左上角爆炸动画效果 btn-anim4：按钮下到上动画效果 html, body { width: 100%; height: 10...
CSS按钮动画(一)
俊而不逊的博客
01-07 3978
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 我们分析一下，其实无非就是鼠标移入和鼠标移走的CSS的样式 废话不多说，咱们直接上代码就完了 html代码 <body> <div class="abc"> <div> <button class="btn btn-1 btn-1a">hello world</button> ...
纯css按钮动画
热门推荐
JiuMeilove的博客
09-14 4万+
一些炫酷的css按钮动画
css -动画按钮
Teemo_shape的博客
04-12 630
按钮上的紫色会动的，不知道怎么上传动效 <button>CSS 动画按钮</button> button { display: block; border: 0; color: white; cursor: pointer; border-radius: 26px; font-size: 20px; padding: 15px 25px; margin: 60px auto; box-shadow: 0 5px 10px rgba...
按钮css动画（分享）
qq_66839130的博客
08-11 759
CodePen（代码笔）一款前端所见即所得的工具，我们可以在线编辑制作前端页面，所见即所得。同时网站提供所有常见的 js、css 库，并且支持流行技术（如 SASS），免去了我们自建平台的麻烦。CodePem 主要功能即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。快速添加外部资源文件。只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。免费创建模板。支持创建三个模板，不是每个作品都需要从白板开始。优秀的外嵌体验。
CSS按钮动画(四)
俊而不逊的博客
01-14 780
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题，起始位置在按钮的最左边 废话就不多说，咱们直接上代码，干就完了！！！ html代码 <body> <div class="abc"> <div> <button class="btn btn-1 btn...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值