当前位置:秋硕笔记 > 教程 > 正文

CSS 按钮button美化

按钮美化






.login-button { /* 按钮美化 */
width: 270px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}
.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}

[cc]



自学教程(如约智惠.com)


CSS 按钮


链接按钮




[/cc]
[cc]



自学教程(如约智惠.com)


按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:








[/cc]
我们可以使用 font-size 属性来设置按钮大小:
[cc]



自学教程(如约智惠.com)


按钮大小

我们可以使用 font-size 属性来设置按钮大小:








[/cc]
我们可以使用 border-radius 属性来设置圆角按钮
[cc]



自学教程(如约智惠.com)


圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮:








[/cc]
我们可以使用 border 属性设置按钮边框颜色
[cc]



自学教程(如约智惠.com)


按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:








[/cc]
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度:
[cc]




自学教程(如约智惠.com)


按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:








[/cc]
我们可以使用 box-shadow 属性来为按钮添加阴影:
[cc]



自学教程(如约智惠.com)


按钮阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:





[/cc]

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论抢沙发