一篇文章带你了解CSS3按钮知识
source link: https://ask.hellobi.com/blog/dcpeng/36836
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在实际开发中，按钮的应用是必不可少。使用 CSS 来制作按钮，可以更有新意，更有趣，也可以自定义自己想要的样式。
一、平面样式CSS按钮
平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势。，这些的平面样式按钮效果很好看。
以下代码是按钮处于正常的情况下的状态。
例：
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
1. 按钮颜色
颜色：Green ，Blue， Red， Gray ，Black。
可以使用 background-color 属性来设置按钮颜色。
例
.button1 {
background-color: #4CAF50;
}
/* Green */
.button2 {
background-color: #008CBA;
}
/* Blue */
.button3 {
background-color: #f44336;
}
/* Red */
.button4 {
background-color: #FFC0CB;
color: black;
}
/* Gray */
.button5 {
background-color: #555555;
}
2. 按钮大小
尺寸10px ，12px ，16px 20px ， 24px。
可以使用 font-size 属性来设置按钮大小:
例 ：
.button1 {
font-size: 10px;
}
.button2 {
font-size: 12px;
}
.button3 {
font-size: 16px;
}
.button4 {
font-size: 20px;
}
.button5 {
font-size: 24px;
}
3. 圆角按钮
弧度：2px ，4px ，8px ，12px ，50%。
可以使用 border-radius 属性来设置圆角按钮:
例：
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 4px;
}
.button3 {
border-radius: 8px;
}
.button4 {
border-radius: 12px;
}
.button5 {
border-radius: 50%;
}
二、边框样式CSS按钮
边框样式按钮与平面按钮属于同一类。唯一的区别是，将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。
1. 按钮边框颜色
绿 蓝 红 灰 黑
可以使用 border 属性设置按钮边框颜色:
例：
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
2. 鼠标悬停按钮
可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 可以使用 transition-duration 属性来设置 "hover" 效果的速度:
例：
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
鼠标放在对应的色块上，显示相对应的颜色。
3. 按钮阴影
阴影按钮 鼠标悬停后显示阴影。
使用 box-shadow 属性来为按钮添加阴影。
例：
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
4. 按钮宽度
宽度：250px，50% ，100%
默认情况下，按钮的大 小有 按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
CSS 实例
.button1 {
width: 250px;
}
.button2 {
width: 50%;
}
.button3 {
width: 100%;
}
三、按钮组
1. 移除外边距并添加 float:left 来设置按钮组:
CSS 实例
.button {
float: left;
}
2. 带边框按钮组
可以使用 border 属性来设置带边框的按钮组:
CSS 实例
.button {
float: left;
border: 1px solid green
}
四、按钮动画
1. 按样式CSS按钮
这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程字典</title>
<style>
.pm button {
width: 200px;
height: 100px;
color: #fff;
background-color: #6496c8;
border: none;
border-radius: 15px;
box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
<div class="pm"> <button class="button">Click Me</button>
</div>
</body>
</html>
五、总结
本文基于Html基础，主要介绍了Html中按钮组件的使用，对于按钮中需要用到的做了详细的讲解，用丰富的案例 ，多种样式展示，帮助大家去更好的理解 。
最后，希望可以帮助大家更好的学习CSS3。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站： http://pdcfighting.com/
本文由dcpeng 创作，采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者，并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台，并不用于任何商业目的，如果有任何问题，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
Recommend
-
46
写作目的：本文主要讲解关于APP PUSH的流程、机制及相关经验，一是为了方便各位可以针对APP迅速制定PUSH消息推送方案，实现0到1的推送功能搭建，二是可以了解下PUSH流程，对各个环节针对性地提高触达率。一 APP PUSH定义与价值
-
17
为什么了解网页布局很重要？网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。 这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！ 卡片式网页布局
-
16
前言 Hi，大家好，我是码农，星期八，本篇继续带来Go语言并发基础，channel如何使用。 看看Go协程如何配合channel。...
-
10
前段时间上了一个用户画像的课程，授课老师是《用户画像：方法论与工程化解决方案》的作者赵宏田老师；另外也研读了一些讲述用户画像的文章。基于对上述学习内容的理解，同时结合工作实践，通过本文和大家分享下有关用户画像的认知、建设方法、产品化和应用。
-
15
上篇文章，我们介绍了CSS3滤镜效果的模糊效果、设置图像高度、调整图像对比度、向图像添加阴影等知识，这篇文章紧承上篇文章，我们重点介绍下CSS3滤镜效果的将图像转换为灰度、在图像上应用色相旋转、对图像应用不透明度知识。 四、向图...
-
9
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。 按钮的作用 在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用...
-
11
一篇文章带你深入了解”B端C化”的设计理念 酷家乐用户体验设计 2021-08-22 1 评论...
-
7
好久不见，甚是想念。喜欢提笔的味道，因为当开始创作的那一刻，心中就拥有了无限的想象。为什么要写广告部分呢，虽然SEO重要，但事实上，它并不适合所有人。其一：并不是所有的网站都适合重点投入SEO，比如产品比较单一的网站、需要快速见到效果的公...
-
11
一篇文章带你了解热门版本控制系统——Git 这篇文章会介绍到关于版本控制的相关知识以及版本控制神器Git 我们可能在生活中经常会使用GitHub网页去查询一些开源的资源或者项目，GitHub就是基于Git而产生的平...
-
4
一篇文章带你了解轻量级Web服务器——Nginx简单入门 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器 在本篇中我们会简单介绍Nginx的特点，安装，相关指令使用以及配置信息和具...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK