【前端】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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年,随着自动驾驶技术的不断发展,神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛,逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…

setsockopt选项对tcp速度

GPT-4 (OpenAI) 每个setsockopt调用都涉及到一个套接字描述符,一个指定网络层的常数(如IPPROTO_IP, IPPROTO_TCP, IPPROTO_IPV6, SOL_SOCKET等),一个指定需配置的选项的常数,一个指向配置值的指针,以及那个…

Oracle(8)什么是Oracle实例(Instance)?

实例(Instance)是Oracle数据库环境的核心组成部分,它是一组与Oracle数据库相互作用,用于访问和操作数据库对象的后台进程和内存结构。 主要特点 后台进程:这些进程用于支持数据库操作、管理和维护任务,如…

时钟芯片LMK04828调试记录

平台:vivado2018.3 芯片:LMK04828 应用场景:在一些高速ADC和DAC的芯片中,需要时钟芯片对其提供专用的高速时钟,并且往往伴随这jesd204b的时钟产生。所以使用时钟芯片来产生同源时钟。 官方手册下载地址 LMK04828 数…

前端控制器模式

前端控制器模式 介绍 前端控制器模式(Front Controller Pattern)是一种常用的软件设计模式,尤其是在Web应用程序开发中。它提供了一个集中的入口点,用于处理所有客户端请求,并将它们分发给相应的处理程序。这种模式有…

C++实现排序算法

冒泡算法 将元素进行两两比较,将大的元素往后移动 平均时间复杂度是O(n^2),最坏时间复杂度是O(n^2),最好时间复杂度是O(n),排序结果具有稳定性。 这里所提到的稳定性主要是针对相同元素而言的,比如5,5,3进行冒泡排序…

粘包问题、mmap和分片上传

一、粘包问题: 如果一端要把文件发给另一端,要发送两个部分的数据:其一是文件名,用于对端创建文件;另一个部分是文件内容。服务端在接收文件名,实际上并不知道有多长, 所以它会试图把网络缓冲区…

Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter 1、安装 conda activate my_env #激活虚拟环境 pip install jupyter #安装 jupyter notebook --generate-config #生成配置文件提示配置文件的位置: Writing default config to: /root/.jupyter/jupyter_notebook_config.py检查版本&am…

android studio中svn的使用

第一步,建立一个项目。 第二步,share project。 第三步,选择存放的位置,然后添加提交信息,最后点击share。这样就可以在svn上面看到一个空的项目名称。 第四步,看到文件变成了绿色,点击commit图…

来聊聊redis集群数据迁移

写在文章开头 本文将是笔者对于redis源码分析的一个阶段的最后一篇,将从源码分析的角度让读者深入了解redis节点迁移的工作流程,希望对你有帮助。 Hi,我是 sharkChili ,是个不断在硬核技术上作死的 java coder ,是 CS…

华为OD机考题(HJ61 放苹果)

前言 经过前期的数据结构和算法学习,开始以OD机考题作为练习题,继续加强下熟练程度。 描述 把m个同样的苹果放在n个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法? 注意:如果有7个苹果和3…

C语言 | Leetcode C语言题解之第275题H指数II

题目&#xff1a; 题解&#xff1a; int hIndex(int* citations, int citationsSize) {int left 0, right citationsSize - 1;while (left < right) {int mid left (right - left) / 2;if (citations[mid] > citationsSize - mid) {right mid - 1;} else {left mi…

Java 中的线程

创建线程的三种方式 方式一&#xff1a;继承Thread类 实现步骤&#xff1a; 继承Thread类并重写run()方法&#xff1b; 创建线程并启动。 代码实现&#xff1a; public class MyThread extends Thread {Overridepublic void run() {for(int i0; i<100; i) {System.out…

Linux Vim 由浅入深的教程

引言 原文链接 Vim是Linux系统中非常强大的文本编辑器&#xff0c;因其强大的功能和灵活的操作而受到广泛使用。尤其是在服务器管理和开发环境中&#xff0c;Vim几乎是必备工具。本教程将以CentOS 7为例&#xff0c;详细讲解Vim的安装、基本操作以及一些高级技巧&#xff0c;…

【git】git中的rebase命令解析

在 Git 中&#xff0c; rebase 是一种强大的命令&#xff0c;用于将一个分支的更改重新应用到另一个分支的顶部。它将一个分支的历史记录重新整合到另一个分支上&#xff0c;使得历史记录看起来更干净和线性。这通常用于将一个功能分支的更改合并到主分支&#xff08;如 mast…

ArcGIS Pro SDK (九)几何 5 多边形

ArcGIS Pro SDK &#xff08;九&#xff09;几何 5 多边形 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 5 多边形1 构造多边形 - 从映射点的枚举2 构造多边形 - 从包络3 获取多边形的点4 获取多边形的各个部分5 枚举多边形的各个部分6 获取多边形的线段7 构建圆环…

Linux应急响应

1.排查账号 进行linux应急响应&#xff0c;首先你得优先查看是否多出来了管理员 &#xff08;1&#xff09;查询特权用户特权用户(uid 为0) awk -F: $30{print $1} /etc/passwd&#xff08;2&#xff09;查询进行远程链接的账号信息 awk /\$1|\$6/{print $1} /etc/shadow …

DB-GPT:LLM应用的集大成者

整体架构 架构解读 可以看到&#xff0c;DB-GPT把架构抽象为7层&#xff0c;自下而上分别为&#xff1a; 运行环境&#xff1a;支持本地/云端&单机/分布式等部署方式。顺便一提&#xff0c;RAY是蚂蚁深度参与的一个开源项目&#xff0c;所以对RAY功能的支持应该非常完善。…

Vue自定义指令与Vue插槽学习

文章目录 自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项 自定义指令-指令的值1.使用效果2.语法 插槽-默认插槽1.作用2.用处4.插槽的基本语法 插槽-具名插槽1.作用2.具名插槽语法3.v-slot的简写 插槽总结1.插槽分类2.作用3.场景4.使用步骤 自定义指令 1.指…

实现Nginx的反向代理和负载均衡

一、反向代理和负载均衡简介 1.1、反向代理 反向代理(reverse proxy)指:以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给Internet上请求连接的客户端。此时代理服务器对外就表现为一个反向代理服务器。 反向代…