Button with Hover Effect
How do I make an button with hover effect?
What is a button with hover effect? How do you make a button with hover effect? This script and codes were developed by Sasha on 12 June 2022, Sunday.
Button with Hover Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button with Hover Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="title"> <a href="http://codepen.io/sashatran/" target="_blank">Subscribe Now</a> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Button with Hover Effect - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Roboto");
* { padding: 0; margin: 0;
}
.container { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(50deg, #B388EB, #8093F1); opacity: 0.8; filter: saturate(1.6);
}
.title { width: 200px; height: 20px; font-size: 16px; font-family: 'Roboto', sans-serif; color: #FFF; text-transform: uppercase; text-align: center; letter-spacing: 4px; background: rgba(0, 0, 0, 0.2); padding: 15px 20px; transition: all .5s ease; border-radius: 3px; cursor: pointer;
}
.title a { text-decoration: none; color: #FFF;
}
.is-active { box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.4); transform: translateY(10px);
}
Button with Hover Effect - Script Codes JS Codes
$(".title").hover(function(){ $(this).toggleClass("is-active");
})
//Without JS by Ana Tudor
// https://codepen.io/anon/pen/egGKwv
// by Scott
//Button to zoom in instead of moving down
// http://codepen.io/scottjenson/pen/mRBGbP
Developer | Sasha |
Username | sashatran |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 2,698 Kb |
Views | 105,248 |
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 |
Subscribe Button | 2,991 Kb |
Instagram Inspired Loader | 2,271 Kb |
Input UI Animation | 3,234 Kb |
Animated CSS Tooltip | 2,818 Kb |
Pages of 2017 | 3,411 Kb |
CSS Girl | 3,535 Kb |
VueJS Todo List | 2,158 Kb |
Moving head with Parallax.js | 3,066 Kb |
Layout Design | 3,488 Kb |
Flexgrow illustration | 3,503 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 |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
Experiment | Toddmoy | 2,849 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!