Wave button
How do I make an wave button?
What is a wave button? How do you make a wave button? This script and codes were developed by ULRIKA PAN on 14 November 2022, Monday.
Wave button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wave button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"><a class="btn" href="#"><span>HOVER</span></a></div>
</body>
</html>
Wave button - Script Codes CSS Codes
@charset "UTF-8";
* { position: relative; font-family: 微軟正黑體; font-weight: 300; letter-spacing: 2px;
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%;
}
.wrapper { height: 100%; background-color: #29292B;
}
.wrapper .btn { text-decoration: none; color: white; border: 1px solid white; padding: 15px 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;
}
.wrapper .btn span { transition: all 0.5s;
}
.wrapper .btn:before { content: ""; background-color: #fff; width: 140%; padding: 130% 0; position: absolute; transform: translateX(-50px); border-radius: 40%; transition: all 0.5s; animation: wave 4.5s infinite linear; bottom: -155px;
}
@keyframes wave { 0% { transform: translateX(-60px) rotate(0deg); } 100% { transform: translateX(-60px) rotate(360deg); }
}
.wrapper .btn:hover span { color: #29292B;
}
.wrapper .btn:hover:before { bottom: -130px;
}
Developer | ULRIKA PAN |
Username | ulrikapan |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 2,498 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
SVG basic | 2,562 Kb |
Weather Box | 6,637 Kb |
SVG Animate | 3,882 Kb |
Icon1 MG | 2,595 Kb |
ABOUT ME | 2,497 Kb |
HTML-form | 2,413 Kb |
Contact form | 4,381 Kb |
Facebook Profile -UI Practice | 4,152 Kb |
Flat Button | 3,153 Kb |
Brand Style Guideline | 3,984 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
Button fills | Zubfatal | 5,205 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Resize image | Happyhj | 1,892 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!