WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
On Hover Animated Button
4155
alex
Open In Editor
Video
Publish Your Code
Recommended
28 May 2024
Delete button
6 May 2024
Neon Hover Button
9 September 2024
Electric button
HTML
Copy
<!doctype html> <html lang="en"> <head> <title>Button Animation</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="/css/styles.css" rel="stylesheet"> </head> <body> <Button>Submit</Button> </body> </html>
CSS
Copy
body{ display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } button{ color:blue; border:none; height:40px; width: 100px; border-radius:7px; cursor: pointer; } button:hover{ color:white; background-color: #3b82f6; box-shadow: 0 0 0 5px #3b83f65f; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
