如何 - 图标按钮

❮ 上一页 下一页 ❯

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

图标按钮

带文本的图标按钮

首页

菜单

垃圾箱

关闭

文件夹

尝试一下 »

如何创建图标按钮

步骤 1) 添加 HTML

添加一个图标库，如 Font Awesome，并将图标追加到 HTML 按钮

示例

图标按钮:

带文本的图标按钮:

首页 菜单 垃圾箱 关闭 文件夹

步骤 2) 添加 CSS

示例

/* 样式按钮 */.btn { background-color: DodgerBlue; /* 蓝色背景 */ border: none; /* 删除边框 */ color: white; /* 白色文本 */ padding: 12px 16px; /* 一些填充 */ font-size: 16px; /* 设置字体大小 */ cursor: pointer; /* 鼠标悬停时指针 */

}/* 鼠标悬停时深色背景 */.btn:hover { background-color: RoyalBlue;

}

尝试一下 »

提示：访问我们的 图标教程 了解有关图标的更多信息。

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

❮ 上一页 下一页 ❯

★

+1

W3schools Pathfinder

Track your progress - it's free!

Log in

Sign Up