❮ 上一节

下一节 ❯

如何创建 - 图标按钮

了解如何使用 CSS 创建图标按钮。

图标按钮:

带有文字的图标按钮:

Home

Menu

Trash

Close

Folder

亲自试一试 »

如何创建图标按钮

步骤 1) 添加 HTML:

添加图标库，例如 font awesome，并将图标附加到 HTML 按钮:

实例

Icon

buttons:

class="btn">

class="fa fa-close">

Icon buttons with text:

class="fa fa-home"> Home

Menu

Trash

Close

Folder

步骤 2) 添加 CSS:

实例

/* 样式按钮 */

.btn { background-color: DodgerBlue;

/* 蓝色背景 */

border: none;

/* 移除边框 */

color: white;

/* 白色文本 */

padding: 12px 16px;

/* 一些填充 */

font-size: 16px;

/* 设置字体大小 */

cursor: pointer;

/* 鼠标悬停 */

}

/* 鼠标悬停时背景变暗 */

.btn:hover { background-color:

RoyalBlue;

}

亲自试一试 »

提示:转到我们的图标教程了解更多关于图标的信息。

转到我们的 CSS 按钮教程，了解有关如何设置按钮样式的更多信息。

❮ 上一节

下一节 ❯