Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Buttons with icons</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>Buttons with icons</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>Icon buttons with text and different colors:</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>