Posted on Sep 23, 2021

Awesome Button Hover Effects Using Pure HTML & CSS

Source Code:

HTML CODE:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button With Awesome Hover Effect</title> </head> <body> <div class="container"> <button>Hover Me</button> <button>Hover Me</button> <button>Hover Me</button> <button>Hover Me</button> </div> </body> </html>

CSS CODE:

*{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } .container{ height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } button{ height: 50px; width: 150px; margin: 15px; font-size: 25px; font-weight: 550; font-family: sans-serif; background: none; outline: none; color: #0e95BF; border: 2px solid #0e95BF; cursor: pointer; transition: 0.5s ease-in all; } button:nth-child(1):hover{ box-shadow: inset 0 60px 0 0 #0e95BF; color: white; } button:nth-child(2):hover{ box-shadow: inset 80px 50px #0e95BF; color: white; } button:nth-child(3):hover{ box-shadow: inset 0 0 0 40px #0e95BF; color: white; } button:nth-child(4):hover{ box-shadow: inset 150px 0 0 0 #0e95BF; color: white; }