【HTML5+CSS】美观的button设置
一、首先我们要创建一个button按钮,如我们所知,没有经过设置的按钮比较不美观。如图所示**二、**例子1如果我们想要将它变得好看一些,就需要对它进行设置。以华为官网注册的按钮为例:首先它是红色,当点击会有悬停变色。而且我们需要进行设置宽高,字体颜色,背景颜色。button{background-color:#f66f6a;co...
文章共769字 · 阅读需要大约3分钟
一键AI生成摘要,助你高效阅读
问答
·
一、
首先我们要创建一个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
更多推荐
已为社区贡献1条内容
所有评论(0)