CSS 按钮
本章节我们为大家介绍使用 CSS 来制作按钮。
基本按钮样式
实例
.button {背景颜色: #4CAF50; /* 绿色 */
边框:无;
颜色:白色;
填充:15px 32px;
文本对齐:居中;
文字装饰:无;
显示:内联块;
字体大小:16px;
}
尝试一下 »
按钮颜色
我们可以使用 属性来设置按钮颜色:background-color
实例
.button1 {背景颜色: #4CAF50; } /* 绿色 */ .button2 {背景颜色: #008CBA; } /* 蓝色 */ .button3 {背景颜色: #f44336; } /* 红色 */ .button4 {背景颜色: #e7e7e7; 颜色:黑色; } /* 灰色 */ .button5 {background-color: #555555; } /* 黑色 */尝试一下 »
按钮大小
我们可以使用 属性来设置按钮大小:font-size
实例
.button1 {字体大小: 10px; } .button2 {字体大小: 12px; } .button3 {字体大小: 16px; } .button4 {字体大小: 20px; } .button5 {字体大小:24px;}尝试一下 »
圆角按钮
我们可以使用 属性来设置圆角按钮:border-radius
实例
.button1 {边框半径: 2px; } .button2 {边框半径: 4px; } .button3 {边框半径: 8px; } .button4 {边框半径: 12px; } .button5 {边框半径:50%;}尝试一下 »
按钮边框颜色
我们可以使用 属性设置按钮边框颜色:border
实例
.button1 { 背景颜色: 白色; 颜色:黑色; 边框:2px 实心#4CAF50; /* 绿色 */ } ...尝试一下 »
鼠标悬停按钮
我们可以使用 选择器来修改鼠标悬停在按钮上的样式。:hover
提示: 我们可以使用 属性来设置 “hover” 效果的速度:transition-duration