【前端】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 提供了完整的开发环境,具有丰富的功能、工具和资源,可以帮助开发者快速实现创意…...

聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...

佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...

宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...

恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...

一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序,无论是测试应用程序、搜寻漏洞还是收集情报,它们都能提升工作流程。 FoxyProxy 代理管理工具,此扩展简化了使用代理(如 Burp…...

02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&:逻辑与 ||:逻辑或 !:逻辑非 短路求值 位运算符 按位与&: 按位或 | 按位取反~ …...
简单介绍C++中 string与wstring
在C中,string和wstring是两种用于处理不同字符编码的字符串类型,分别基于char和wchar_t字符类型。以下是它们的详细说明和对比: 1. 基础定义 string 类型:std::string 字符类型:char(通常为8位)…...