Button Hover Effects code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#"><span>Button</span></a> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 20px; color: black; padding: 10px 30px; border: 2px solid black; text-decoration: none; text-transform: uppercase; letter-spacing: 4px; transition: 0.5s; overflow: hidden; } a::before, a::after, span::before, span::after { content: ''; position: absolute; width: 25.5%; height: 100%; background: black; z-index: -1; transition: 0.5s; } a::before { top: 0; left: -26%; } a:hover::before { top: 0; left: 0; } a::after { top: 0; right: -26%; } a:hover::after { top: 0; right: 0; } span::before { bottom: -100%; left: 25%; } a:hover span::before { bottom: 0; left: 25%; } span::after { top: -100%; left: 50%; } a:hover span::after { top: 0; left: 50%; } a:hover { color: white; }
