Material Design Ripple effect on buttons
How do I make an material design ripple effect on buttons?
A light jQuery adaptation of http://codepen.io/pixelass/blog/material-design-ripple & http://codepen.io/pixelass/blog/material-design-ripple-2 from @pixelass (George Adams). What is a material design ripple effect on buttons? How do you make a material design ripple effect on buttons? This script and codes were developed by Yoann Nouveau on 08 September 2022, Thursday.
Material Design Ripple effect on buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Ripple effect on buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="btn ripple-btn"> <span>Ripple Button</span>
</a>
<div class="info"></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>
Material Design Ripple effect on buttons - Script Codes CSS Codes
.btn { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; width: 200px; height: 80px; margin: 25% auto; border-radius: 2px; background-color: coral; outline: none; text-align: center; font-family: sans-serif; font-size: 1.5em; font-weight: bold; color: white; cursor: pointer;
}
.btn span { position: relative; display: inline-block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1;
}
.ripple-btn { position: relative; overflow: hidden;
}
.ripple { position: absolute; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #ffb79d; pointer-events: none; -webkit-animation: scale-in .4s ease-in-out; animation: scale-in .4s ease-in-out; opacity: 0;
}
@-webkit-keyframes scale-in { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 1; } 20% { opacity: 1; } 80% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; }
}
@keyframes scale-in { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 1; } 20% { opacity: 1; } 80% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; }
}
Material Design Ripple effect on buttons - Script Codes JS Codes
$(document).ready(function() { //Event Listening $('.ripple-btn').on('click', rippleAnimation); /** * rippleAnimation **/ function rippleAnimation(e) { e.preventDefault(); $this = $(this); //remove ripple if it's already on $oldRipple = $('.ripple'); if($this.has($oldRipple)) $oldRipple.remove(); //If your page has more than one button instead of this just do $('.ripple').remove() to remove them all //create element $ripple = $(document.createElement('div')); $ripple.addClass('ripple'); //Get the click's location var eY = e.offsetY; var eX = e.offsetX; //Get the element's width and height var w = $this.width(); var h = $this.height(); //get the offset of eX and eY var offsetX = Math.abs(w / 2 - eX); var offsetY = Math.abs(h / 2 - eY); //get the delta of X and Y var deltaX = w/2+offsetX; var deltaY = h/2+offsetY; //size //The squareroot of ( deltaX² + deltaY² - 2 * deltaX * deltaY * cos(90°) (in radian = 1/2 PI) ) * 2 var size = Math.sqrt( Math.pow(deltaX,2) + Math.pow(deltaY,2) -2 * deltaX * deltaY * Math.cos(Math.PI / 2) ) * 2; //apply everything to $ripple $ripple.css({ 'top': eY, 'left': eX, 'height': size, 'width': size }); //and append it $this.append($ripple); }
});
Developer | Yoann Nouveau |
Username | YoannN2 |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 3,261 Kb |
Views | 44,528 |
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 |
Formulaire HTML | 3,809 Kb |
Off Menu Canvas Experiments | 4,298 Kb |
A Pen by Yoann Nouveau | 5,581 Kb |
WIP - Toggling password JS JQUERY ANGULAR VUEJS | 5,806 Kb |
User Profile | 5,877 Kb |
Project Euler 1 | 2,353 Kb |
Test | 2,380 Kb |
PongJS | 5,461 Kb |
Tooltips | 3,983 Kb |
Checkbox jQuery | 2,445 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 Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Tab panels | Accessibility | 0 Kb |
Save for later... | Victorfreire | 1,359 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Client-side Email Validation | Collizo4sky | 1,538 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!