button按钮样式_一篇文章带你了解CSS3按钮知识
在实际开发中，按钮的应用是必不可少。使用 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/ 想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
相关文章：
Ubuntu 18.04时间同步
Ubuntu 18.04时间同步原文连接: 原文链接 内容： Sync Clock with Time Servers through the Command Line Check Current Time Status The timedatectl command lets you check the current time status of your system clock. Open your Ubuntu terminal through…
UVa 10051 Tower of Cubes（类似LIS）
题意： 一些重量递增而且各个面都有颜色的立方体，要将这些立方体堆成一个塔，要求两个接触面同色，而且下面的立方体更重。求塔的最大高度。 思路： 用求LIS的思想，无非是多了几个状态。dp[i][j]表示前i个箱子&…
【十五分钟Talkshow】fmplan(十五分钟计划)的初步想法
摘要信息 这个演讲将概述提出了我最近开始的一个名为“fmplan”的 基于互联网的教育计划 }计划简介}内容简介}目标受众}学习环境}支持和帮助讲义地址 http://www.xizhang.com/fmplan/resources/fmplan_overview.pdf 视频地址 http://www.tudou.com/programs/view/hhS5U-o-qRc/…
ACC026简要题解
这场AGC是时间正好在NOI之前休养生息的日子里，果断选择了放弃(虽然也从没有用大号打过)。在随便做完了前几题之后就踏上了去长沙的旅程。NOI系列比赛总是休闲无比，咕咕不断，竟然连开幕式都能咕，今天AK了一下笔试之后就来刚后两题&…
IT男专用表白程序
[c]代码库 001#include<iostream.h> 002#include<windows.h> 003#include<stdio.h> 004#define stoptimeshort 40 005#define stoptimelong 100 006void main() 007{ 008// 009char ch[10]; 010int f[9][36]{ 0,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,…
zabbix 安装_zabbix系列(五) Grafana4.6.3+Zabbix 的安装部署
使用了一段时间Grafana，感觉还挺好用的。部分效果图如下：zabbix的安装步骤请参考以下地址，就不再描述，本章主要记录Grafana的部署https://blog.csdn.net/wu2700222/article/details/80520085grafana官网地址：http://…
ubuntu 默认鼠标双击问题
ubuntu 默认鼠标双击问题 内容： 选择 universalAccess ->Typing ubuntu 16.04 ubuntu 18.04 关闭鼠标悬停 点击 点击测试
石家庄的联通破网络，请大家鉴定
C:\Users\workman>pathping www.baidu.com 通过最多 30 个跃点跟踪到 www.a.shifen.com [61.135.169.125] 的路由: 0 workman-PC [192.168.0.100] 1 bogon [192.168.0.1] 2 110.240.90.1 3 221.192.14.166 4 221.192.12.85 5 61.182.172.137 6 218.12.255.210 7 202.99.160.…
Chapter 8(查找)
1.二分查找和插值查找//************************Search.h*********************************** #ifndef SEARCH_H #define SEARCH_H#include <stdio.h> #include <stdlib.h>int BiSearch(int array[],int n,int key);int IVSearch(int array[],int n,int key);int…
HDU 3549 Flow Problem(最大流模版EK算法）
题目链接 第一道最大流，赤裸裸的模版题，刚好可以熟悉模版用。今天看了一下最大流，就看了一个EK算法，感觉有点和二分图匹配算法有点相似，对于最大流问题有点了解了，不过为什么这么做，也不是 很懂…
html css 显示数值_【CSS纯技术】20.03.05-CSS渲染的原理
今天学的东西信息量都很大，导致我总是要反复观看。因为自己还没理解透，所以这一篇也不再追求大家能够看懂，只是用于帮助自己梳理头绪。一、CSS如何计算数值？在写CSS的过程中，我们会用px、em、rem、vh、vw、%等各种单位…
# Ubuntu 配置自带vnc桌面共享
Ubuntu 配置自带桌面共享 1、在setting>>shareing>>remote 选择on 如果用ubunutu直接远程连接的话已经可以了， 2、在ubuntu下使用系统自带的remmina连接 vnc类型 直接输入ip地址 3、如果在windows下面连接的话需要把加密选项关闭 内容：…
select刷新后保存原先选择的信息
前提是之前选择的信息进了后台。 在页面上放一个<s:hidden name"xxx" id"inputF"/>，用它来存select上次选择的值。由于信息已经存在了后台，这个hidden域不管怎么刷新，都会有值。 // s_list是要恢复取值的select va…
python命令行参数解析OptionParser类用法实例
python命令行参数解析OptionParser类用法实例 本文实例讲述了python命令行参数解析OptionParser类的用法，分享给大家供大家参考。 具体代码如下： from optparse import OptionParser parser OptionParser(usage"usage:%prog [optinos] fil…
Linux下程序崩溃dump时的 core文件的使用方法
Linux下程序崩溃dump时的 core文件的使用方法 1、在启动程序前执行 ulimit -c unlimitedunlimited 表示生成文件的大小限制，也可以修改为自定义的大小，例如： ulimit -c 1024对 core 文件的大小进行限制，单位为 blocks …
div 自动换行_js自动打字--autotypejs
autotypejsuse for typing automatically.介绍使用原生JavaScript（es6）实现的自动打字效果。效果图示例代码(vue)：<用法获取：--yarn-- yarn add autotypejs--git-- git clone https://github.com/1esse/autotypejs.git--npm-- …
int[]到string[]的转换方法 Array.ConvertAll
2019独角兽企业重金招聘Python工程师标准>>> using System; using System.Collections.Generic; //int[]到string[]的转换 public class Example { static void Main() { int[] int_array { 1, 2, 3 }; string[] str_array Array.ConvertAll(int_array, new Conve…
Linux结构目录
linux结构目录 Linux中有一句话叫做：一切皆文件。 下面来了解一下这些文件。 首先看一下Linux根目录下结构：bin：存放二进制可执行文件，一般常用命令都存放在这里。boot：存放系统启动时的一些引导文件。dev：…
# NVIDIA Jetson系列系统镜像备份烧录指南
NVIDIA Jetson系列系统镜像备份烧录指南 我使用的是Jetson AGX Xavier 注意事项: 1、烧录工具版本在4.2之前 是叫做 JetPack,， 4.2以及4.2以后的版本叫做SDKmanager， 对应的Jetson OS的版本在4.2与4.1也是差异比较大的，4.2之前的版本智能…
面向对象编程（OOP）----BLUE大师JS课堂笔记(二)
一，把面向过程的程序改写成面向对象的程序 1.前提 所有的程序都在onload里面 2.改写 不能函数嵌套，可以全局变量 3.onload-------------------->构造函数 全局变量------------------->属性 函数----------------------->方法 需要用到面向…
张仰彪第二排序法_C语言中的最常用的两种排序算法你知道吗？
冒泡法排序核心思想：若有N个数从小到大排序，需进行N-1轮比较，第一轮每相邻的两个数据进行比较N-1次，最终挑选出最大的数，放到这一轮的最后位置；第二轮比较N-1-i次，挑选出这一轮最大的数…
ZOJ3203
为什么80%的码农都做不了架构师？>>> 用一次导数求极值，但是还是犯了错误，要判断边界条件，就是墙上投影值小于0和大于h的时候。 //-------common header--------------- #include <stdio.h> #include <vector…
【校招面试 之 C/C++】第16题 C++ new和delete的实现原理
1、new new操作针对数据类型的处理，分为两种情况：（1）简单数据类型（包括基本数据类型和不需要构造函数的类型）代码实例：int* p new int;汇编码如下： int* p new int; 00E54C44 pus…
C++Primer学习笔记(二)
17.string对象中字符的处理：cctype头文件中定义:isalnum(c) 如果c是字母或数字,则为trueisalpha(c) 如果c是字符,则为trueiscntrl(c) 如果c是控制字符,则为trueisdigit(c) 如果c是数字,则为trueisgraph(c) 如果c不是空格,但可打印,则为trueisprint(c…
Windows下Qt程序打包
Windows下Qt程序打包 将windeployqt.exe 目录添加到系统环境变量 windeployqt.exe目录如下： 命令行打包 1、打开命令行 2、执行打包命令 windeployqt helloworld.exe -dirdeploy -release注意，应用程序使用绝对路径，如果是d盘&#x…
c语言栈的实现以及操作_数据结构之链栈基本操作的实现详解（C语言描述）
迎新过后，来带领你好好学习的小软准时归来，快带着上次学习链表操作的记忆和我开启新的旅程吧:链栈：就是栈的链式存储结构，简称链栈。首先我们要考虑的就是链栈的存储结构，由于栈只是在栈顶进行插入和删除操作ÿ…
float向u8和s8的转换
为什么80%的码农都做不了架构师？>>> 关于float向u8，s8这种类型转换，比较内藏玄机，还是小心为妙，这种级别的优化做了不如不做。 直接float向char类型的做法是用__ftol2_sse命令完成，具体怎么做的…
SQL Server DB Link相关
若想通过DBlink 清空表或执行存储过程，可以通过这种方式Insert into table select * from table时，Pull 方式比Push方式快很多转载于:https://www.cnblogs.com/luhe/p/9341413.html
windows下安装程序制作
引用链接: https://blog.csdn.net/signjing/article/details/7855855 工具: 1、脚本编辑工具 hmnisedit_downcc.zip 百度云盘链接：https://pan.baidu.com/s/1LZ-KFqMocM30UU8eMudAnA 提取码：6kgf 2、编译工具 nsis3.0.4cvs.zip 百度云盘链接&#…
实测 Mysql UUID 性能(转)
网上普遍认为Mysql 使用 UUID 主键性能低下，甚至建议用 自增ID 作为主键并用 UUID作唯一索引的方案。但没有提供具体的数据证明使用 UUID 作为主键时性能究竟低下到何种程度。为此我专门做了测试。 测试环境：WindowsXP ，内存 4G …