Button Hover Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" data-text="button">Button</a> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 10px 20px; font-family: Verdana, Geneva, Tahoma, sans-serif; text-transform: uppercase; text-decoration: none; background: red; color: white; font-size: 20px; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } a::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: yellow; padding: 10px 20px; box-sizing: border-box; transform-origin: top; transform: perspective(1000px) rotateX(270deg); transition: 0.5s; } a:hover::before { transform: perspective(1000px) rotateX(0deg); } a::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; padding: 10px 20px; box-sizing: border-box; transform-origin: bottom; transform: perspective(1000px) rotateX(-270deg); transition: 0.5s; transition-delay: 0.5s; } a:hover::after { transform: perspective(1000px) rotateX(0deg); }
