Ripple Effect Material Design

Developer
Chris
Size
2,135 Kb
Views
26,312
  1. Ripple Effect Material Design Previews
  2. Ripple Effect Material Design HTML Codes
  3. Ripple Effect Material Design CSS Codes
  4. Ripple Effect Material Design JS Codes

How do I make an ripple effect material design?

What is a ripple effect material design? How do you make a ripple effect material design? This script and codes were developed by Chris on 21 August 2022, Sunday.

Ripple Effect Material Design Previews
IQ Test

Ripple Effect Material Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ripple Effect Material Design</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="test ripple" data-ripple-color="#FFFFFF"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ripple Effect Material Design - Script Codes CSS Codes

body { text-align: center;
}
.ripple { overflow: hidden;
}
.ripple-effect { position: absolute; border-radius: 50%; width: 50px; height: 50px; background: white; animation: ripple-animation 2s;
}
@keyframes ripple-animation { from { transform: scale(1); opacity: 0.4; } to { transform: scale(100); opacity: 0; }
}
.test { position: relative; border: none; outline: none; cursor: pointer; background: #89669b; color: white; padding: 68px 60px; border-radius: 2px; font-size: 22px;
}

Ripple Effect Material Design - Script Codes JS Codes

(function(window, $) { $(function() { $('.ripple').on('click', function(event) { event.preventDefault(); var $div = $('<div/>'), btnOffset = $(this).offset(), xPos = event.pageX - btnOffset.left, yPos = event.pageY - btnOffset.top; $div.addClass('ripple-effect'); var $ripple = $(".ripple-effect"); $ripple.css("height", $(this).height()); $ripple.css("width", $(this).height()); $div .css({ top: yPos - ($ripple.height() / 2), left: xPos - ($ripple.width() / 2), background: $(this).data("ripple-color") }) .appendTo($(this)); window.setTimeout(function() { $div.remove(); }, 2000); }); });
})(window, jQuery);
Ripple Effect Material Design - Script Codes
Ripple Effect Material Design - Script Codes
Home Page Home
Developer Chris
Username onlinechris
Uploaded August 21, 2022
Rating 3
Size 2,135 Kb
Views 26,312
Do you need developer help for Ripple Effect Material Design?

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!

Chris (onlinechris) Script Codes
Name
Animated CSS3 mail mascot
SVG food icons
KickMaterial - Kickstarter Material app icon
Calendar Animation
Animated CSS3 gradient button for e-mail
Menu icon, animated upon open and close.
Responsive Style Menu for HTML e-mail
IPhone5S SVG Space Grey
Play to Pause, material design style
Twitter SVG icon
Create amazing video scripts with AI!

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!