user2407463 user2407463 - 4 months ago 6x
HTML Question

MD Ripple Button Fails to Open Link

I was making a CSS button and wanted to add the Material Design ripple or wave effect to it. I found an easy script on codepen and it works great by applying the class "ripple" to any element like div, button, image, link and etc. It seems to work great except for some reason it won't actually open the link applied to the button I've made. I'm not a jquery or javascript expert but I'm guessing it has to do with the js. When I remove the "ripple" class from the button the link works fine, but when it's added the button fails to launch the link even if the ripple animation works fine.

Any help on how to fix this issue would be greatly appreciated thanks. The codepen demo I'm using can be found here Material Design Ripple Buttons

Hmmm... I get that you're saying it needs to be one or the other, but not sure I quite understand the your explanation. I can get it to open the link in the original or "same" window by removing the target="_blank" but I was kind of hoping to be able to have the target option without both tabs opening the new link if that's possible.

(function (window, $) {

$(function() {

$('.ripple').on('click', function (event) {
window.location = $(this).attr('href');
/* event.preventDefault(); */

/*HTML Button Code*/
<div class="media__body tagline overtext"><a href="" class="media-btn-bottom-blue ripple" target="new">Learn More</a></div>


Just as ochi pointed out you have to remove the line window.location = $(this).attr('href'); from your code.

Example here: (clicking on the left login button should open in a new tab)