Simple hover color slide effect
How do I make an simple hover color slide effect?
What is a simple hover color slide effect? How do you make a simple hover color slide effect? This script and codes were developed by Elmer Balbin on 22 January 2023, Sunday.
Simple hover color slide effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple hover color slide effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <a href="#" class="jbtn">SUBSCRIBE</a>
</div>
</body>
</html>
Simple hover color slide effect - Script Codes CSS Codes
body { background-color: #e4f2ff; font-family: Arial, sans-serif; text-align: center; padding-top: 50px;
}
.jbtn { display: inline-block; text-decoration: none; color: #fff; font-size: 20px; padding: 20px 30px; margin: 0 auto; background: #1464a7; /* fallback purposes */ background: linear-gradient(to right, #267fca 50%, #1464a7 50%); background-size: 200% 100%; background-position: bottom right; border-top: 7px solid #267fca; transition: all .5s linear;
}
.jbtn:hover { background-position: left bottom;
}
Developer | Elmer Balbin |
Username | elmzarnsi |
Uploaded | January 22, 2023 |
Rating | 3 |
Size | 1,650 Kb |
Views | 4,048 |
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 |
Material Design Card Flip - Direction Aware | 3,689 Kb |
Collapsed div borders using CSS3 box-shadow | 1,490 Kb |
Direction Aware Tiles using clip-path Pure CSS | 3,904 Kb |
Some button hover effects | 1,833 Kb |
My Profile CSS | 3,355 Kb |
Material Design Input Placeholder | 1,925 Kb |
Self-Caricature SVG Animation | 5,943 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 |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
CubeTronic | Jurbank | 3,716 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 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!