An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- BoingBoing
- The Logo Smith
- Smashing Apps
- Inspiredology
- My Ink Blog
- Fudge Graphics
- CSS Globe
- Line 25
- CSS Tricks
- Hashedout
Help Webnuz
Referal links:
May 26, 2022 02:55 pm GMT
Original Link: https://dev.to/robsonmuniz16/how-to-make-a-button-with-awesome-hover-effects-html-css-44f2
How to Make a Button With Awesome Hover Effects | HTML & CSS
Learn How To Create An Amazing Animated Text using Html & CSS step-by-step from scratch.
HTML
<!DOCTYPE html><html lang="en"><head> <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 Effects</title> <link rel="stylesheet" href="style.css"></head><body> <a href="#" class="blue"><span>Button</span><i></i></a> <a href="#" class="green"><span>Button</span><i></i></a> <a href="#" class="red"><span>Button</span><i></i></a></body></html>CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #27282c; flex-direction: column; gap: 50px;}a { position: relative; background: #fff; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5em; letter-spacing: 0.01em; font-weight: 400; padding: 10px 30px; border-radius: 2px; transition: 0.5s;}/* Colors */.blue { --clr: #2979ff;}.green { --clr: #00c853;}.red { --clr: #f50057;}a:hover { background: var(--clr); color: var(--clr); letter-spacing: 0.25em; box-shadow: 0 0 30px var(--clr);}a::before { content: ""; position: absolute; inset: 2px; background: #27282c;}a span { position: relative; z-index: 1;}a i { position: absolute; inset: 0; display: block;}a i::before { content: ""; position: absolute; top: 0; left: 80%; width: 15px; height: 5px; background-color: #27282c; transform: translateX(-50%) skewX(325deg); transition: 0.5s;}a:hover i::before { width: 20px; left: 20%;}a i::after { content: ""; position: absolute; bottom: 0; left: 20%; width: 15px; height: 5px; background-color: #27282c; transform: translateX(-50%) skewX(325deg); transition: 0.5s;}a:hover i::after { width: 20px; left: 80%;}Original Link: https://dev.to/robsonmuniz16/how-to-make-a-button-with-awesome-hover-effects-html-css-44f2
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