【前端】20种 Button 样式
20种 Button 样式
在前端开发中,Button 按钮的样式设计是提升用户交互体验的重要一环。以下是20种常见的Button样式,这些样式主要基于CSS实现,可以根据具体需求进行调整和组合。
1. 默认样式
- CSS 样式:
.button { background-color: #007bff; color: #fff; border: 1px solid #007bff; }
2. 扁平样式
- CSS 样式:
.button { background-color: transparent; color: #007bff; border: none; }
3. 圆角样式
- CSS 样式:
.button { border-radius: 5px; }
4. 阴影样式
- CSS 样式:
.button { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
5. 渐变样式
- CSS 样式:
.button { background: linear-gradient(to right, #ff4e50, #f9d423); color: #fff; }
6. 边框样式
- CSS 样式:
.button { border: 1px solid #007bff; background-color: transparent; color: #007bff; }
7. 透明样式
- CSS 样式:与扁平样式类似,但更强调透明背景。
8. 图标样式
- CSS 样式:
.button { padding-left: 20px; background: url('icon.png') left center no-repeat; }
9. 悬浮样式
- CSS 样式:
.button:hover { background-color: #0056b3; }
10. 点击样式
- CSS 样式:
.button:active { transform: translateY(1px); }
11. 圆形样式
- CSS 样式:
.button { border-radius: 50%; }
12. 边框渐变样式
- CSS 样式:
.button { border: 1px solid transparent; background: linear-gradient(to right, #ff4e50, #f9d423); color: #fff; }
13. 悬浮渐变样式
- CSS 样式:
.button:hover { background: linear-gradient(to right, #ff4e50, #f9d423); color: #fff; }
14. 三维样式
- CSS 样式:增强阴影效果,如
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
15. 反向样式
- CSS 样式:
.button { background-color: #007bff; color: #fff; } .button:hover { background-color: transparent; color: #007bff; }
16. 边框圆角样式
- CSS 样式:
.button { border-radius: 20px; border: 1px solid #007bff; }
17. 悬浮阴影样式
- CSS 样式:
.button:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
18. 打字机样式
- CSS 样式:结合动画实现打字机效果,需要定义
@keyframes
动画。
19. 灯泡样式
- CSS 样式:
.button { background: url('lightbulb.png') center center no-repeat; }
20. 鼓起样式
- CSS 样式:
.button { transform: scale(1.1); }
,通过放大按钮来模拟鼓起效果。
请注意,上述样式仅为示例,实际开发中可能需要根据具体的设计需求进行调整。此外,随着Web技术的发展,新的样式和效果不断涌现,开发者应保持对新技术和新趋势的关注,以不断提升用户交互体验。
更复杂的button样式
在前端开发中,复杂的Button样式往往结合了多种CSS属性和技术,以实现独特的视觉效果和交互体验。以下是一些更复杂的Button样式示例,这些样式通过结合渐变、阴影、动画、边框等多种元素来增强视觉效果。
1. 渐变边框+阴影+动画按钮
这个按钮结合了线性渐变背景、边框渐变、内外阴影以及悬停动画效果。
.complex-btn {display: inline-block;padding: 10px 20px;font-size: 16px;color: #fff;border: 2px solid transparent;border-image: linear-gradient(to right, #ff4e50, #f9d423) 1;background: linear-gradient(to right, #ff4e50, #f9d423);border-radius: 5px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);transition: all 0.3s ease;
}.complex-btn:hover {background: linear-gradient(to left, #ff4e50, #f9d423);box-shadow: 0 6px 12px rgba(0,0,0,0.2);transform: translateY(-2px);
}.complex-btn:active {transform: translateY(0);box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
2. 立体效果按钮
通过多重阴影和边框来模拟按钮的立体效果。
.stereo-btn {display: inline-block;padding: 10px 20px;font-size: 16px;color: #fff;background: #3498db;border: none;border-radius: 5px;box-shadow: 0 5px #999,0 10px 15px rgba(0,0,0,0.4);position: relative;
}.stereo-btn:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #3498db;border-radius: 5px;z-index: -1;box-shadow: 0 15px 25px rgba(0,0,0,0.6),inset 0 -3px rgba(0,0,0,0.2);
}.stereo-btn:hover {cursor: pointer;background: #2980b9;
}.stereo-btn:hover:before {background: #2980b9;
}
3. 波纹效果按钮
利用伪元素和动画实现点击时的波纹扩散效果。
.ripple-btn {display: inline-block;padding: 10px 20px;font-size: 16px;color: #fff;background: #4CAF50;border: none;border-radius: 5px;overflow: hidden;position: relative;transition: background-color 0.3s;
}.ripple-btn:before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.3);animation: rippleEffect 0.6s ease-out;z-index: -1;
}@keyframes rippleEffect {from {width: 0;height: 0;opacity: 1;}to {width: 200px;height: 200px;opacity: 0;
相关文章:
【前端】20种 Button 样式
20种 Button 样式 在前端开发中,Button 按钮的样式设计是提升用户交互体验的重要一环。以下是20种常见的Button样式,这些样式主要基于CSS实现,可以根据具体需求进行调整和组合。 1. 默认样式 CSS 样式:.button { background-co…...

机器人构建详解:售前售后服务客服机器人与广告生成机器人的微调数据处理方法
引言 大模型(如BERT、GPT等)在自然语言处理任务中展现了强大的能力,但为了使其更贴合特定应用场景,通常需要进行微调。本文将详细讲解如何为售前售后服务的客服机器人和广告生成机器人准备高质量的微调数据,并通过具体…...
mysql的执行计划分析和索引下推以及索引长度计算
1 执行计划介绍 执行计划(Execution Plan)是数据库查询优化的重要工具,用于展示数据库如何执行 SQL 查询的详细过程。它包含了查询操作的步骤、各个步骤的执行顺序、使用的索引、访问的表、连接方式、预计的成本等信息 可以显示SQL语句最终…...

C#中的string操作详解-截取、分割、连接、替换等
在C#中,string 类提供了许多用于操作字符串的方法,包括截取、分隔和连接等。以下是一些常用字符串操作的介绍和实例: 1. 截取字符串 Substring 方法 用于从字符串中截取子字符串。 语法: //从startIndex开始截取,…...
Redis Cluster 分片机制
Redis 集群是 Redis 提供的一种分布式实现,用于水平扩展数据存储能力。通过 Redis 集群,可以将数据分片存储在多个 Redis 节点上,同时提供高可用性和故障转移功能。 分片(Sharding): Redis 集群将数据划分…...
论文结论:GPTs and Hallucination Why do large language models hallucinate
GPTs and Hallucination 当一个主题有普遍共识,并且有大量语言可用于训练模型时,大模型的输出可以反映出该共识观点在没有足够关于主题的语言示例【晦涩/数据有限】,或者主题有争议,或是对主题没有明确共识的情况下,就…...

CSS在线格式化 - 加菲工具
CSS在线格式化 打开网站 加菲工具 选择“CSS在线格式化” 或者直接访问 https://www.orcc.online/tools/css 输入CSS代码,点击左上角的“格式化”按钮 得到格式化后的结果...

组件通信(父传子,子传父,跨组件通信)
组件(component)是vue.js最核心的功能,是可扩展的HTML元素。每个页面都是一个HTML。以.vue结尾的文件,都可以叫组件。 场景:将一个完整的项目,拆分成不同的功能模块。 注意:组件首字母要大写。 …...
JWT 令牌:原理、应用与安全考量
深入理解 JWT 令牌:原理、应用与安全考量 文章目录 深入理解 JWT 令牌:原理、应用与安全考量一、引言二、JWT 令牌与传统方式的区别(一)传统身份验证方式的特点与局限(二)JWT 令牌的优势 三、JWT 令牌的字段…...
YOLOv5+pyqt5+摄像头在特定条件下进行目标检测并采集原始数据
项目介绍 项目地址 GitHub - biabu0/Yolov5_D435i: 通过YOLOV5与pyqt5实现一个使用D435i深度摄像头采集特定需求与场景下的深度数据的小程序 通过YOLOV5对指定的区域进行检测,当检测到目标进入特定区域时,开始保存数据,摄像头采用D435i深度…...
12.6深度学习_模型优化和迁移_整体流程梳理
七、整体流程梳理 1. 引入使用的包 用到什么包,临时引入就可以,不用太担心。 import time import osimport numpy as np import pandas as pd import torch import torch.nn as nn import torch.optim as optim import torchvision import torchvisio…...
TCP 和 UDP 可以使用同一个端口吗
TCP 和 UDP 可以使用同一个端口吗 简单来说 可以使用同一个端口,关键在于它们属于不同的传输层协议,在内核中是两个完全独立的软件模块,各自维护独立的端口空间,虽然端口号相同,但通过协议类型可以确定是哪种协议。 …...

信而泰网络测试仪校准解决方案
一、影响仪表精度的因素 网络测试仪是用于对数据网络及其相关设备性能参数进行测试的仪表,可以模拟网络终端产生流量,进行网络性能测试,对网络状态进行实时监测,分析和统计。数字计量对于精准数据的网络测试仪来说是一剂强心针&a…...

Java 实现给pdf文件指定位置盖章功能
Java 实现给pdf文件指定位置盖章功能 开发中遇到一个需求, 需要给用户上传的的pdf文件, 指定位置上盖公章的功能, 经过调研和对比, 最终确定实现思路. 这里是使用pdf文件中的关键字进行章子的定位, 之所以这样考虑是因为如果直接写死坐标的话, 可能会出现因pdf大小, 缩放, 盖章…...
机器学习支持向量机(SVM)算法
一、引言 在当今数据驱动的时代,机器学习算法在各个领域发挥着至关重要的作用。支持向量机(Support Vector Machine,SVM)作为一种强大的监督学习算法,以其在分类和回归任务中的卓越性能而备受瞩目。SVM 具有良好的泛化…...
解决 MySQL 启动失败与大小写问题,重置数据库
技术文档:解决 MySQL 启动失败与大小写问题,重置数据库 1. 问题背景 在使用 MySQL 时,可能遇到以下问题: MySQL 启动失败,日志显示 “permission denied” 或 “Can’t create directory” 错误。MySQL 在修改配置文…...

计算生成报价单小程序系统开发方案
计算生成报价单小程序报价系统,是根据商品品牌、类型、型号、规格、芯数、特性、颜色、分类进行选择不同的参数进行生成报价单,要求报价单支持生成图片、pdf、excel表格。 计算生成报价单小程序系统的主要功能模块有: 1、在线生成报价单&…...

若依集成Uflo2工作流引擎
文章目录 1. 创建子模块并添加依赖1.1 新建子模块 ruoyi-uflo1.2 引入 Uflo2 相关依赖 2. 配置相关 config2.1 配置 ServletConfig2.2 配置 UfloConfig2.3 配置 TestEnvironmentProvider 3. 引入Uflo配置文件4. 启动并访问 Uflo2 是由 BSTEK 自主研发的一款基于 Java 的轻量级工…...
STM32模拟I2C通讯的驱动程序
目录 STM32模拟I2C通讯的驱动程序 开发环境 引脚连接 驱动程序 STM32模拟I2C通讯的驱动程序 开发环境 立创天空星开发板、主控芯片为STM32F407VxT6 引脚连接 使用stm32的PB9引脚模拟I2C时钟线SCL、PB8引脚模拟I2C数据线SDA 驱动程序 i2c.h文件如下:#ifndef…...

Unity简单操作及使用教程
Unity 是一款强大的跨平台游戏引擎,它不仅支持 2D 和 3D 游戏的开发,还可以用于虚拟现实 (VR)、增强现实 (AR)、动画、建筑可视化等多个领域。Unity 提供了完整的开发环境,具有丰富的功能、工具和资源,可以帮助开发者快速实现创意…...

XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...