Material ripple effect with pure CSS and JS

Developer
Joost Jansen
Size
3,408 Kb
Views
32,384
  1. Material ripple effect with pure CSS and JS Previews
  2. Material ripple effect with pure CSS and JS HTML Codes
  3. Material ripple effect with pure CSS and JS CSS Codes
  4. Material ripple effect with pure CSS and JS JS Codes

How do I make an material ripple effect with pure css and js?

What is a material ripple effect with pure css and js? How do you make a material ripple effect with pure css and js? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Material ripple effect with pure CSS and JS Previews
IQ Test

Material ripple effect with pure CSS and JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material ripple effect with pure CSS and JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="coolbutton" href="#">WOOOH!</a> <script src="js/index.js"></script>
</body>
</html>

Material ripple effect with pure CSS and JS - Script Codes CSS Codes

html,
body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.coolbutton { outline: 0; text-decoration: none; overflow: hidden; height: 150px; width: 150px; text-align: center; line-height: 9; position: relative; background-color: #639; color: #fff; border-radius: 10px; -webkit-transform: translate(0, 0, 0); transform: translate(0, 0, 0); -webkit-transition: -webkit-transform 150ms ease-in-out; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
.coolbutton:hover { -webkit-transform: scale(1.05); transform: scale(1.05);
}
.coolbutton:active { -webkit-transform: scale(1); transform: scale(1);
}
.coolbutton span.ink { display: block; position: absolute; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); background-color: rgba(255,255,255,0.3);
}
.coolbutton span.ink.animate { -webkit-animation: ripple 450ms linear; animation: ripple 450ms linear;
}
@-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); }
}

Material ripple effect with pure CSS and JS - Script Codes JS Codes

'use strict';
var coolButton = document.querySelector('a.coolbutton');
coolButton.addEventListener('click', function (e) { e.preventDefault(); var ink = undefined, d = undefined, x = undefined, y = undefined; ink = document.createElement("span"); ink.classList.add('ink'); this.appendChild(ink); d = Math.max(this.clientWidth, this.clientHeight); ink.style.width = d + 'px'; ink.style.height = d + 'px'; x = e.pageX - this.offsetLeft - ink.clientWidth / 2; y = e.pageY - this.offsetTop - ink.clientHeight / 2; ink.style.left = x + 'px'; ink.style.top = y + 'px'; ink.classList.add('animate'); setTimeout(function () { ink.parentElement.removeChild(ink); }, 450);
});
Material ripple effect with pure CSS and JS - Script Codes
Material ripple effect with pure CSS and JS - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 3,408 Kb
Views 32,384
Do you need developer help for Material ripple effect with pure CSS and JS?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
Flexbox Layout - One page website
IPhone
League of Legends Login UI
React Close Dialog with Animation
Personal website redesign v1.0
Skyrim Start Game UI
A Pen by Joost Jansen
TicTacToe
React CSSTransitionGroup
Flexbox Mixin
Create amazing blog posts 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!