<!DOCTYPE html>
<html>
<head>
<title>Кнопки с иконками</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
button {
border: none;
border-radius: 5px;
color: #ffffff;
padding: 10px 14px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #666666;
box-shadow: 2px 4px #999999;
}
.btn {
background-color: #999999;
}
.home {
background-color: #ff6347;
}
.menu {
background-color: #008080;
}
.about {
background-color: #e6b800;
}
</style>
</head>
<body>
<h2>Кнопки с иконками</h2>
<p>Icon buttons:</p>
<button class="btn">
<i class="fa fa-home"></i>
</button>
<button class="btn">
<i class="fa fa-bars"></i>
</button>
<button class="btn">
<i class="fas fa-info-circle"></i>
</button>
<p>Кнопки с иконками текстов и разными цветами:</p>
<button class="home">
<i class="fa fa-home"></i> Home
</button>
<button class="menu">
<i class="fa fa-bars"></i> Menu
</button>
<button class="about">
<i class="fas fa-info-circle"></i> About
</button>
</body>
</html>