An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Mashable
- Technology Review
- Reencoded
- Stylized Web
- Wal You
- CSS Tricks
- Willems Lab
- Daily Now
- The Verge
- TechPowerUp
Help Webnuz
Referal links:
September 23, 2021 05:18 am GMT
Original Link: https://dev.to/technicalvandar885/awesome-button-hover-effects-using-pure-html-css-204c
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;}Find Me On:
Original Link: https://dev.to/technicalvandar885/awesome-button-hover-effects-using-pure-html-css-204c
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To