Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document</title> <style> button { display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #eeeeee; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } button span:after { content: "\00bb"; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } button:hover { background-color: #f7c2f9; } button:hover span { padding-right: 25px; } button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>Boutons de style</h2> <button> <span>Envoyer</span> </button> </body> </html>