Plugin ma na celu zmianę wyglądu obecnych przycisków tworzonych za pomocą bloków Gutenberg oraz dodanie do nich efektu ripple po kliknięciu.

Plik pika-ripple-button.php

<?php
/*
Plugin Name: Pika Ripple Button Plugin
Description: Plugin ma na celu zmianę wyglądu obecnych przycisków tworzonych za pomocą bloków Gutenberg oraz dodanie do nich efektu ripple po kliknięciu.
Author: pikademia
Version: 1.0.0
Author URI: https://pikademia.pl
*/

if ( !defined( 'ABSPATH' ) ) {
    exit; 
}
define ('PIKA_RIPPLE_PLUGIN_URL', trailingslashit( plugins_url('/',__FILE__) )); 

function pika_ripple_plugin(){
    wp_enqueue_style('pika-ripple-plugin-style',PIKA_RIPPLE_PLUGIN_URL.'pika-style.css','',rand());
    wp_enqueue_script('pika-ripple-plugin-script',PIKA_RIPPLE_PLUGIN_URL.'pika-script.js', array('jquery'),rand(), true );
}
add_action('wp_enqueue_scripts','pika_ripple_plugin');

Plik pika-style.css

a.piBtn{
    background-color: rgb(43, 145, 145);
    color: azure;
    padding: 15px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    overflow:hidden;
    display: block;
    position: relative;
    text-align:center;
    cursor:pointer;
    -webkit-transition: background-color 0.3s ease-out;  
    -moz-transition: background-color 0.3s ease-out;  
    -o-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out; 
}
a.piBtn:hover{
    background-color:brown;
    -webkit-transition: background-color 0.3s ease-out;  
    -moz-transition: background-color 0.3s ease-out;  
    -o-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out; 
}
    
.piBtnSpan{
    position: absolute;
    background: #fff;
    pointer-events: none;
    border-radius: 50%;
    transform:translate(-50%, -50%);
    animation: animate 0.3s linear infinite;
}
    
@keyframes animate{
    0%{
    width:0px;
    height:0px;
    opacity:0.8;
    }
    100%{
    width:300px;
    height:300px;
    opacity:0;
    }
}

Plik pika-script.js

jQuery( function ( $ ) {
    $(".wp-block-button__link").each(function(index){
        $(this).removeClass().addClass("piBtn").click(function(e){
            let ripples = $(document.createElement('span')).addClass("piBtnSpan");
            let offset = $(this).offset();
            ripples.css("left", e.pageX - offset.left);
            ripples.css("top", e.pageY - offset.top);
            $(this).append(ripples);
            setTimeout(()=>{ripples.remove()},300);
        })
    })
})