Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Boutons avec icônes</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>Boutons avec icônes</h2> <p>Boutons des icônes:</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>Boutons des icônes avec un texte et des différentes couleurs:</p> <button class="home"><i class="fa fa-home"></i> Acceuil</button> <button class="menu"><i class="fa fa-bars"></i> Menu</button> <button class="about"><i class="fas fa-info-circle"></i> À propos</button> </body> </html>