程序员经验分享-hwhale

css按钮样式

2023-11-19

创建漂亮的 CSS 按钮的 10 个代码片段

IT程序狮子烨 IT程序狮子烨
1 个月前

如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。

网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。

1. Plastic Buttons

这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。

代码地址：【传送门】

2. Cool Buttons

这是一组由 Felipe Marcos 制作的 酷炫按钮。与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。

你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。

代码地址：【传送门】

3. Google Buttons

Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在 此 Pen 中克隆了这些风格。

作者受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此相似的示例，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。

代码地址：【传送门】

4. Bunch-o-Buttons

这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与 扁平化样式间任意切换。是不是很便捷呢？

代码地址：【传送门】

5. Social Buttons

这是由具备独特的配色方案和品牌图标组成的 社交按钮合集。开发者 Stan Williams 在 GitHub上也发布了这个合集，并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成，同时这些按钮都有一个背景上的闪亮渐变，但它们的质量都是不错的。

如果你需要在你的网站上添加一些社交分享按钮，那么这个纯 CSS 按钮合集包是个不错的选择。

代码地址：【传送门】

6. Jelly Animation

乍一看，你可能会认为这是一个普通的按钮。但在点击按钮后，你会发现这款果冻按钮具备了绑定到单击事件的特殊动画效果。

除了那有趣的动画，让我印象深刻的是按钮下方的阴影设计。而按钮与阴影一同动画的设计方式，更容易让任何启动网站或社交网络的用户产生点击的欲望。

代码地址：【传送门】

7. Parallax Button

这是一个由 Tobias Reich 使用 CSS3 的径向渐变实现的视差按钮。按钮的整个背景与阴影都是利用纯 CSS 来实现的，它确实让我印象深刻。但是，Tobias 也利用了一些 JavaScript ，实现了按钮悬停和点击时的视觉畸变的效果。

这个按钮也是我所见过的具备高级按钮效果的其中之一，它可以很好地融入任何网页。

代码地址：【传送门】

8. Hubspot Pills

这组按钮是开发者 Joe Henriod 基于 Hubspot 的设计所创建的。虽然它们的功能与传统的 HTML 按钮相似，但它们是由可以应用于任何元素的 CSS 类构建的。

你会发现这组药片按钮只展现了红色和蓝色，但它也支持自定义颜色。而华丽的悬停与点击效果，也足以吸引到任何人的注意。

代码地址：【传送门】

9. Sexy SCSS Buttons

大多数前端开发者都热衷于利用 Sass/SCSS，因为它们更容易编写，更能提升开发者的工作效率。

这些由 SCSS 实现的按钮，它们具备了内外阴影效果，且构建的细节让人印象深刻。你可以通过使用单一的类来改变其颜色，甚至可以将自己的创意混合于其中。

当它们融入至页面时，按钮的悬停与活动状态也有一种 3D 的既视感。

在任何网站上，这些按钮也比较容易实现，或者你也可以在 CodePen 上将 SCSS 代码转换为 CSS 代码，以便你的使用。

代码地址：【传送门】

10. Mozilla-Style Buttons

Mozilla 网站曾经历了一次 品牌重塑，它们放弃了传统的塑料设计，但我却很中意他们原来的设计风格。幸运的是，开发者 Felix Schwarzer 通过 他的代码再次重现了他们曾经的设计。

我们可以看到，蓝色三角形、渐变的背景以及 3D 斜角都是利用纯 CSS 创建的。而这组按钮的设计也彰显出大气的一面，并且更容易吸引用户的注意。

代码地址：【传送门】

总结

这 10 个独特的按钮集都是由纯 CSS3 开发的，你可以通过改变它们的大小、颜色以及样式将它们融入到企业、博客、社交网络或电子商务商店等项目中。

这个列表中整理的内容，只是 CodePen 上冰山的一角。如果你正在寻找更多的资源，不妨常逛逛 CodePen ，或许你会收获到更多的惊喜。

感谢你的阅读。

注：

  1. 本文版权归原作者所有，仅用于学习与交流。
  2. 如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：10 Free Code Snippets for Creating Beautiful CSS Buttons
作者：Jake Rocheleau 
译者：IT程序狮
译文地址：http://www.jianshu.com/p/430817f5adee

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

CSS3

css

网页设计

按钮

css按钮样式 的相关文章

  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T

  • javascript：获取带有单位的CSS prop值[重复]

    这个问题在这里已经有答案了 我的代码是这样的 image 1 position absolute top 3vw 我的尝试 http jsfiddle net z8k6t3fb 1 http jsfiddle net z8k6t3fb 1

  • 如何应用 EXIF 定位

    我注意到并不是每个浏览器都应用 EXIF 方向 我的手机上的 Chrome 不应用 EXIF 方向 但 Safari 手机则应用 那么既然它不是标准的 那么如何在 Safari 上应用 EXIF 方向而不应用两次呢 另外我想知道是否可以在客

  • Firefox 页面源中的红色字体

    我一直在摆弄我的元描述 试图通过显示数据库中的相关数据来使它们更加独特 但是当我在 Firefox 中右键单击并显示页面源代码检查元描述时 元描述标签呈红色 让我觉得我犯了某种错误 红色文字通常代表什么意思 如果您将鼠标悬停在该红线上 Fi

  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup

  • htmlspecialchars() 期望参数 1 为字符串，Laravel 中给出的数组

    我的程序中出现了这个错误Laravel刀片模板 htmlspecialchars 期望参数 1 为字符串 给定数组 我尝试将数组转换为刀片模板中的字符串 这是代码 Where silderImageDataArray是这里存储的变量和值 这

  • 避免 Django 中表单输入元素 ID 重复

    当一页上的两个表单具有相同名称的字段时 Django 将生成无效的 HTML

  • 如何将内部 div 与外部 div 的底部对齐？

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2

  • 如何在严格模式下设置元素样式属性？

    Given body document getElementsByTagName body 0 iframe document createElement iframe iframe src protocol settings script

  • 缩放对象上的弹跳动画

    拥有对象比例 然后在返回到原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么 我意识到我可以做一些事情 比如将其缩放到 2 2 然后 1 8 然后 2 0 但我正在寻找一种方法 您只需在比例因子上执行弹跳动画 因为我的比例因子会改变

  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on

  • Internet Explorer 10，最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de

  • 如何使 Flexbox 父级具有其子级的宽度？

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa

  • 使用 Javascript 编辑和保存用户 HTML - 安全性如何？

    例如我有一个Javascript 支持的表单创建工具 您可以使用链接添加元素的 html 块 如输入字段 并使用 TinyMCE 来编辑文本 这些是通过自动保存功能保存的 该功能在特定事件的后台执行 AJAX 调用 被调用的保存函数负责数据

  • 在CSS中重置Margins/Padding时使用*是错误的吗？

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现

  • 使用 JSON 传递 HTML

    我正在使用 JSON 将数据传递到 iPhone 和 iPad 数据的一个字段是 HTML 问题是编码 这是我得到的回复 gt GadgetHTML strong Hello strong gt from Catworld br n img

  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s

  • 如何使用FileSystem API的window.requestFileSystem？

    我用 JavaScript 编写了以下代码 JavaScript 代码 var fs null function initFS window requestFileSystem window requestFileSystem window

  • HTML 和 CSS 的基本编码标准 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道它们是否是像 PSR 01 这样的 HTML 和 CSS 基本编码标准 我尝试谷歌搜索和搜索 但没有找到 我建议看看类似的东西

  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和

随机推荐

  • 如何在linux下开启FTP服务

    1 首先服务器要安装ftp软件 查看是否已经安装ftp软件下 which vsftpd 如果看到有vsftpd的目录说明服务器已经安装了ftp软件 2 查看ftp 服务器状态 service vsftpd status 3 启动ftp服务器

  • Ubuntu 16 安装IDEA

    1 安装JDK sudo mkdir usr local java cd usr loca java 将jdk 8u171 linux x64 tar gz移动到此处 然后 sudo tar zxvf jdk 8u171 linux x64

  • 三次iframe框架切换

    记录一次坑 做UI自动化 页面是嵌套的frame框架 整个页面是一个iframe 在iframe里面 上方是一个frame 下方是一个frame 下方frame里又分为左右两个frame 所以要定位右侧页面元素 需要三次切入frame框架

  • 强化学习基础三大优化方法：（一）动态规划

    文章目录 一 简介 二 动态规划 DP Dynamic Planning 方法 一 策略评估 二 策略迭代 1 策略改进 2 策略迭代 3 迭代算法 三 编程实践 一 环境介绍 二 策略编写 1 初始化 2 价值评估 3 策略改进 4 其他

  • 按哪个键进入BIOS设置

    按哪个键进入BIOS 一 笔记本电脑 1 主要按键 Delete ESC F1 F2 F10 2 不同品牌笔记本电脑进入BIOS按键 惠普hp 启动和重新启动时按f2或者F10 或者先按ESC再按F10 索尼sony 启动和重新启动时按f2

  • TypeError: metaclass conflict: the metaclass of a derived class must be a (non-strict) subclass of t

    python类继承冲突问题 关键截图 描述 exa类同时继承了QtWidgets Ui MainWindow两个类 但是QtWidgets Ui MainWindow这两个类是冲突的 所以会报上述错误 可以修改为 class exa QtW

  • Educational Codeforces Round 98 (Rated for Div. 2)B-Toy Blocks

    B Toy Blocks time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard output Y

  • 转载-小白解惑-NUMA体系结构详解

    由于OpenStack Kilo增加很多针对NUMA体系结构的增强功能 所以又重新温习了下NUMA相关的知识 简单做个笔记 1 NUMA的几个概念 Node socket core thread 对于socket core和thread会有

  • Windows11 中 Vmware Workstations16 安装CentOS 7

    目录导航 准备 镜像导入安装及配置 CenOS7安装 准备 Windows版本是 Windows 11 专业版 版本 22H2 安装日期 2022 6 25 操作系统版本 22623 730 体验 Windows Feature Exper

  • php随机生成密码函数

    随机生成密码函数 param int length 密码长度 return string function generate password length 8 密码字符集 可任意添加你需要的字符 abc abcdefghijklmnopq

  • python常用编译器和解释器的区别_详解python编译器和解释器的区别

    详解python编译器和解释器的区别 高级语言不能直接被机器所理解执行 所以都需要一个翻译的阶段 解释型语言用到的是解释器 编译型语言用到的是编译器 编译型语言通常的执行过程是 源代码 预处理器 编译器 目标代码 链接器 可执行程序 某种意

  • Linux（CentOS 或者 Ubuntu都可以）安装docker

    Linux CentOS 或者 Ubuntu都可以 安装docker 介绍下如何在Linux下面安装docker 安装方式如下 1 关闭防火墙 systemctl stop firewalld systemctl disable firew

  • 【Unity Optimize】使用对象池（Object Pooling）优化项目

    目录 1 对象池 Object Pooling 介绍 2 实现对象池脚本 3 使用对象池生成Cube 4 效果展示 5 Unity资源商店的对象池插件 1 对象池 Object Pooling 介绍 Unity中的对象池 Object Po

  • 单例模式(小小单例，一点也不小)

    小小单例 一点也不小 今天终于发现了原来单例模式还有这么多道道 单例模式解决了两个基本问题 全局访问和实例化控制 出自 大话设计模式 懒汉式单例模式 定义 要在第一次被引用时 才会将自己实例化 所以就被称为懒汉式单例模式 也就是我们常用的单

  • C 标准库 - 《assert.h》

    原文链接 https www runoob com cprogramming c standard library assert h html 简介 C 标准库的 assert h头文件提供了一个名为 assert 的宏 它可用于验证程序做

  • R: R版本更新及R包迁移（详细步骤）

    在安装R包的过程中 有时候会提醒R版本不够等情况 当需要更新R版本 又需要保证旧版本安装的R包可以完整迁移到新版本R时 可通过 installr 包实现 install packages installr library installr

  • python使用SMTP发送邮件

    SMTP是发送邮件的协议 Python内置对SMTP的支持 可以发送纯文本邮件 HTML邮件以及带附件的邮件 Python对SMTP支持有smtplib和email两个模块 email负责构造邮件 smtplib负责发送邮件 首先 我们来构

  • ARC105

    C Camels and Bridge 题意 一堆骆驼过桥 每个桥有承重和长度 问骆驼从头到尾的最近距离 假设这时候骆驼的过桥顺序已经安排好 每一个桥相当于一个限制条件 限制了 l r 的最近距离 也就是说 对于每一个骆驼 j 要保证 好了

  • OJ题目8--动态规划问题

    1 509 斐波那契数 力扣 LeetCode leetcode cn com 过去一直用递归法 但由于栈区空间的限制 当递归过深时容易发生栈溢出 int fib int n if n 0 return 0 else if n 1 retu

  • css按钮样式

    创建漂亮的 CSS 按钮的 10 个代码片段 IT程序狮子烨 1 个月前 如果你正在寻找一些高质量的 CSS 按钮的示例 那么这篇文章一定是你的 菜 在本文中 我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集 并附有它们的

热门标签