Material Ripple Effect on Button
How do I make an material ripple effect on button?
Simple ripple buttons with css and jquery. What is a material ripple effect on button? How do you make a material ripple effect on button? This script and codes were developed by Samuel Janes on 14 September 2022, Wednesday.
Material Ripple Effect on Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Ripple Effect on Button</title> <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <h1>Click on the button to view the ripple effect</h1> <button class="btn" > Button </button>
</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>
Material Ripple Effect on Button - Script Codes CSS Codes
body { background: #333; font-family: "Oxygen", sans-serif; -webkit-font-smoothing: antialised;
}
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; text-align: center;
}
button.btn { padding: 15px 50px; background: #2b90d9; border: none; outline: none; color: white; font-size: 25px; position: relative; overflow: hidden; transition: 0.15s ease-in-out;
}
button.btn:after { content: ""; display: block; position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, 0%); width: 0%; height: 2px; background: white; transition: 0.15s ease-in-out;
}
button.btn:hover:after { width: 100%;
}
button.btn .ripple { width: 100px; height: 100px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; position: absolute; transform: scale(0); transition: 0.15s ease-in-out; animation: ripple 0.35s linear;
}
@keyframes ripple { to { transform: scale(2.5); opacity: 0; }
}
Material Ripple Effect on Button - Script Codes JS Codes
$(document).on('click', '.btn', function(e){ $(".btn").append('<div class="ripple"></div>'); var ripple = $(".btn").find(".ripple").last(); var OffsetButton = $(".btn").offset(); var mouseX = e.pageX - OffsetButton.left - ripple.height() / 2; var mouseY = e.pageY - OffsetButton.top - ripple.width() / 2; $(ripple).css({top: mouseY, left: mouseX}).show( function(){ var rippleTarget = $(this) setTimeout( function(){ $(rippleTarget).remove(); },350); });
});
Developer | Samuel Janes |
Username | SamuelJanes |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 2,972 Kb |
Views | 26,312 |
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 |
Queens of the Stone Age Rated R Album Cover in CSS | 2,958 Kb |
Clipped Navigation | 2,966 Kb |
Modest Mouse Night on the Sun in CSS | 3,042 Kb |
CSS only tooltips | 3,273 Kb |
Multi-Step Sign Up Form | 4,177 Kb |
Responsive Carousel Slider with Jquery | 3,456 Kb |
Bottom Right Menu | 2,426 Kb |
Cool Loader | 1,782 Kb |
New Portfolio Idea | 8,720 Kb |
Navigation triangle | 2,759 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 |
A Pen by panstable | Panstable | 2,940 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Mario | Takaneichinose | 3,902 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Base64 SVG Me | MrBambule | 44,786 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!