【HTML5+CSS】美观的button设置

一、
首先我们要创建一个button按钮，如我们所知，没有经过设置的按钮比较不美观。如图所示

**二、**例子1
如果我们想要将它变得好看一些，就需要对它进行设置。
以华为官网注册的按钮为例：
首先它是红色，当点击会有悬停变色。而且我们需要进行设置宽高，字体颜色，背景颜色。

button{
     
	            background-color:#f66f6a;
	            color:white;
	            width: 400px;
	            height: 45px;
	            border:0;
	            font-size: 16px;
	            box-sizing: content-box;				
                border-radius: 5px;
            }
            button:hover{
     
	            background-color: #a54b4a;
            }

该图片是在悬停状态下，得到的效果。是一致的。
三、例子2
例子2就用百度注册页面的button设置，百度注册页面如下图所示：
如图所见，边角有弧度，而且有背景颜色，字体颜色。

button{
     
	            background-color:dodgerblue;
	            color:white;
	            width: 300px;
	            height: 47px;
	            border:0;
	            font-size: 16px;			
                border-radius: 30px;
            } 

效果图：
四、
其实关于这个按钮的设置，我觉得还是比较简单的，背景颜色，边框高度，宽度设置。其次比较重要的是边框弧度border-radius,这个属性的设置，只要掌握它就都不是问题。
关于border-radius：
语法：border-radius: 1-4 length|% / 1-4 length|%;
他可以指定四个角的值。
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

制作人：只识闲人不识君
日期：2020.04.18