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 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>