HTML Button
HTML Button:
________________________________________________
HTML Button
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML Button</title> <style> .button{ background-color: white; border-radius: 20px; color: black; border: 4px solid black; text-align: center; font-family: sans-serif; display: inline-block; cursor: pointer; width: 300px; margin: 150px; font-size: 50px; padding: 20px; transition: all 0.5s; } .button:hover span{ padding-right: 120px; } .button span{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after{ content: 'Hers'; position: absolute; opacity: 0; top: 0; right: -10px; transition: 0.5s; } .button:hover span:after{ opacity: 1; right: 0; } .button:hover{ background-color: black; color: green; border-color: green; font-size: 50px; } </style> </head> <body class="body"> <button class="button"><span>Dark</span></button> </body> </html>
_____________________________________________
Dark Hers
YouTube
https://instagram.com/darkhers
https://www.facebook.com/darkhers
TikTok
https://www.tiktok.com/@darkhers
https://www.pinterest.co.uk/darkhers
Comments
Post a Comment