一、
首先我们要创建一个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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐