Google Button Ripple
How do I make an google button ripple?
A couple of buttons to demonstrate Google's Material Design button ripple effect when being clicked.I'll probably be making this into a simple plugin for myself soon.. What is a google button ripple? How do you make a google button ripple? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.
Google Button Ripple - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Button Ripple</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <h1>Google Material Design Buttons</h1>
<h2>A couple of buttons to demonstrate the ripple effect on Google's Material Design buttons.</h2>
<p>Google's docs for this are <a href="http://www.google.com/design/spec/animation/responsive-interaction.html" target="_blank">here</a>.</p>
<div class="container"> <p>
<button type="button" class="button button-ripple"> Text
</button>
<button type="button" class="button button-ripple" data-ripple-color="yellow"> Text
</button> </p>
<p> <button type="button" class="button button-ripple button-round"> !
</button> <button type="button" class="button button-ripple button-round button-white"> !
</button> </p>
</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>
Google Button Ripple - Script Codes CSS Codes
.button { background: orange; outline: none; color: white; border: none; border-radius: 0.25em; padding: 0.75em 2em; line-height: 1; box-shadow: 0 0 0.25em rgba(0,0,0,0.5); text-shadow: 0 0 0.25em rgba(0,0,0,0.5); font-size: 1.5rem;
}
.button-white { background: white; color: orange;
}
.button-round { border-radius: 100%; padding: 0.75em; width: 3em; height: 3em;
}
.button-ripple { position: relative; overflow: hidden; -webkit-transform: translate(0); transform: translate(0);
}
.button-ripple_content { position: relative; z-index: 1;
}
.button-ripple_ripples { position: absolute; top: 0; left: 0;
}
.button-ripple_ripple{ display: block; position: absolute; border-radius: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; -webkit-transform: scale(0); transform: scale(0); top: 0; left: 0; -webkit-animation: ripple-animation 2s; animation: ripple-animation 2s;
}
@-webkit-keyframes ripple-animation { from { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); opacity: 0.8; } to { -webkit-transform: scale3d(100,100,1); transform: scale3d(100,100,1); opacity: 0; }
}
@keyframes ripple-animation { from { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); opacity: 0.8; } to { -webkit-transform: scale3d(100,100,1); transform: scale3d(100,100,1); opacity: 0; }
}
/* Make things perty */
html { height: 100%;}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;}
h1, h2{ margin: 0; text-transform: uppercase;text-shadow: 0 0 0.5em black;}
h2 { font-weight: 300}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;}
a:hover { color: yellow;}
.container { display:block; margin: 2em 0;}
Google Button Ripple - Script Codes JS Codes
jQuery(document).ready(function(){ ripple.init();
$('.button-ripple').on('click touchstart', ripple.click);
});
var ripple = { click: function(event){ /* if ( $(this).find('.ripple').length ){ return; } */ event.preventDefault(); var $this = $(this), $ripples = $this.find('.button-ripple_ripples'), rippleColor = $this.attr('data-ripple-color') || $this.css('color'), btnOffset = $this.offset(), inputX = ( event.type === 'click' ) ? event.pageX : event.originalEvent.touches[0].pageX, inputY = ( event.type === 'click' ) ? event.pageY : event.originalEvent.touches[0].pageY, xPos = inputX - btnOffset.left, yPos = inputY - btnOffset.top; $ripples.append('<span class="button-ripple_ripple"></span>'); var $ripple = $ripples.find('.button-ripple_ripple'); $ripple.on(animationEnd, function(){ $(this).remove(); }); $ripples[0].style.webkitTransform = 'translate3d(' + xPos + 'px,' + yPos + 'px,0)'; $ripples[0].style.transform = 'translate3d(' + xPos + 'px,' + yPos + 'px,0)'; $ripple.css({ backgroundColor: rippleColor });
}, init: function(){ $('.button-ripple').wrapInner('<span class="button-ripple_content"></span>'); $('.button-ripple').append('<div class="button-ripple_ripples"></div>') }
};
var animation = { // Determines proper transition property per browser whichAnimationEvent: function(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'OAnimation':'oanimationend', 'MozAnimation':'animationend', 'WebkitAnimation':'webkitAnimationEnd', 'animation':'animationend' }; for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } }
};
// Makes it easier to bind cross browser, like $('element').one(transitionEnd, function(){});
var animationEnd = animation.whichAnimationEvent();
Developer | Jon Christensen |
Username | JMChristensen |
Uploaded | August 03, 2022 |
Rating | 3.5 |
Size | 3,524 Kb |
Views | 32,384 |
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 |
Velocity Example | 2,150 Kb |
CSS Banners | 2,548 Kb |
SVG Circle Progress | 3,368 Kb |
SVG Animated Stroke Dash | 3,623 Kb |
Basic Snap.svg JS Animation | 5,622 Kb |
FitText.js Demo | 1,897 Kb |
SVG Text Masking | 2,141 Kb |
Section Diagonal Areas | 2,810 Kb |
Simple CSS Loaders | 3,841 Kb |
3D Cube | 2,543 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 |
Magnus 3 | ARocketfish | 7,944 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Sticky menu on scroll | Senff | 2,869 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!