5.27学习总结

CSS 按钮

本章节我们为大家介绍使用 CSS 来制作按钮。

---

基本按钮样式

默认按钮 CSS 按钮

实例

.button {
背景颜色： #4CAF50; /* 绿色 */
边框：无;
颜色：白色;
填充：15px 32px;
文本对齐：居中;
文字装饰：无;
显示：内联块;
字体大小：16px;
}

尝试一下 »

---

按钮颜色

绿 蓝 红 灰色 黑

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

实例

.button1 {背景颜色： #4CAF50; } /* 绿色 */ .button2 {背景颜色： #008CBA; } /* 蓝色 */ .button3 {背景颜色： #f44336; } /* 红色 */ .button4 {背景颜色： #e7e7e7; 颜色：黑色; } /* 灰色 */ .button5 {background-color： #555555; } /* 黑色 */

尝试一下 »

---

按钮大小

10像素 12像素 16像素 20像素 24像素

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

实例

.button1 {字体大小： 10px; } .button2 {字体大小： 12px; } .button3 {字体大小： 16px; } .button4 {字体大小： 20px; } .button5 {字体大小：24px;}

尝试一下 »

---

圆角按钮

2像素 4像素 8像素 12像素 50%

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

实例

.button1 {边框半径： 2px; } .button2 {边框半径： 4px; } .button3 {边框半径： 8px; } .button4 {边框半径： 12px; } .button5 {边框半径：50%;}

尝试一下 »

---

按钮边框颜色

绿 蓝 红 灰 黑

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

实例

.button1 { 背景颜色： 白色; 颜色：黑色; 边框：2px 实心#4CAF50; /* 绿色 */ } ...

尝试一下 »

---

鼠标悬停按钮

绿 蓝 红 灰 黑
绿 蓝 红 灰 黑

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

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

实例

.button { -webkit-transition-duration： 0.4s; /* 野生动物园 */ 过渡持续时间： 0.4秒; } .按钮：悬停 { 背景颜色： #4CAF50; /* 绿色 */ 颜色： 白色; } ...