GP has button ripple effect ?

Hi there,

its nothing that we would be able to provide support for, but that Site provides the necessary code and instruction to add the library, and i cant see any reason why it would not work with GP.

For GP buttons the element class you would target is .button

Can you help me to trigger the button CSS class like in here to download button ? and navigation menu.

The code that site provides does all the explaining. Once you have installed and enqueued the scripts the default runtime script to be added is:

$(".some, .elements").ripple();

The .some, .elements are the CSS classes it will target so you would need replace them with the ones you are using e.g .popupaoc-button for the download button.

But this is wildly out of our scope as we can't support 3rd party scripts as the may introduce conflicts.

Its not working BTW Where i use this $(".some, .elements").ripple();

I mean in hooks or elements ?

You can add it as a script in the Hook Element like so:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".some, .elements").ripple();
    });
</script>

It adds the legitripple class in the html

and the head links are :

<link href="stylesheet" type="text/css" href="https://pcprober.com/ripple-assets/ripple.min.css">
<script src="https://pcprober.com/ripple-assets/jquery-2.1.4.min.js"></script>
<script src="https://pcprober.com/ripple-assets/ripple.min.js"></script>

but its not working :(

and do i have to load jQuery 2.1.4 i think GP already have that script.

GP doesn't jQuery load it by default - it only uses it for the Sticky header. So yes if there isn't a plugin already enqueueing it.

Its impossible to tell if the ripple is working on a button, as the click redirects immediately you will never see the effect. Try it on a static element.

https://pcprober.com/ripple-test-page/

Still adds the legitripple css but now working

jQuery is probably overkill for an effect like this.

Instead, I'd do this:

<a class="button ripple" href="#">My button</a>

Then add this CSS:

/* Ripple effect */
a.button.ripple {
  background-position: center;
  transition: background 0.8s;
}

a.button.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

a.button.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

I already used CSS base ripple the only this it does not do is when you hold the click it doesn't spread

Yes, it will only do it when you click the button fully. I tested it and it works nicely.

Thank You David and Tom

No problem :)