If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

Add ripple effect to blogger Ripple Effect

Create ripple on click effect For default blogger templates in the new version, a very cool ripple click effect is the Ripple effect, also known as m

Create ripple on click effect  For default blogger templates in the new version, a very cool ripple click effect is the Ripple effect, also known as material click.
Many of you may know it, especially those who use default blogger templates, the difference here when using the built-in Ripple from Blogger is the large JS library and there are redundant things when not using it, which makes the blog heavier in page loading.

You can use the effect on any element in the blog, including buttons, images, titles, etc... Experiment by clicking on the button or view the effect here
Explain how to install
1. Log in to your blog
2. Appearance >> Edit HTML
3. Find ]]></b:skin> and place the following code on it
.flat-icon-button {
 background: transparent;
 border: 0;
 outline: none;
 padding: 8px;
 cursor: pointer;
 box-sizing: content-box;
 display: inline-block;
 line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
 border-radius: 50%
}
.flat-icon-button .splash.animate {
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s
}
.flat-button {
 cursor: pointer;
 border-radius: 2px;
 padding: 8px
}
.ripple {
 position: relative
}
.ripple>* {
 z-index: 1
}
.splash-wrapper {
 bottom: 0;
 left: 0;
 overflow: hidden;
 pointer-events: none;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 0
}
.splash {
 background: rgba(0, 0, 0, .3);
 border-radius: 100%;
 display: block;
 opacity: .9;
 position: absolute;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0)
}
.splash.animate {
 -webkit-animation: ripple-effect .5s linear;
 animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}
@keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}
4. Add this code above </body>
<script src='https://rawcdn.githack.com/MIANIRFANULLAHSHAHMARWAT/ripple/954152ae06d8577556ae59a4ef1b492da17f2efa/ripple.js'></script>
<style>
Usage
"Square effect: add ripple to any element with the class="ripple" . 
Round effect: Add ripple to any element within the class="ripple flat-icon-button"
<Example: <div class="ripple Test"> </div>


Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.