PIKADEMIA

Projekt edukacji alternatywnej

Animacja przycisku Ripple Effect w HTML, CSS i JS

W pliku html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <h1>Button with ripple effect</h1>
            <div class="btnGroup">
                <a href="#" class="piBtn">Button</a>    
                <a href="#" class="piBtn">Button</a> 
                <a href="#" class="piBtn">Button</a>    
                <a href="#" class="piBtn">Button</a> 
            </div>
        </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

W pliku css

body{
  text-align: center;
}

a.piBtn{
  background: linear-gradient(90deg, rgb(43, 145, 145), rgb(168, 211, 51));
  border-radius: 30px;
  color: azure;
  padding: 15px 30px;
  margin:20px auto;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  max-width: 200px;
  display: block;
  position: relative;
  overflow: hidden;
}

a.piBtn:nth-child(2){
  background: linear-gradient(90deg, rgb(31, 77, 175), rgb(162, 221, 255));
}
a.piBtn:nth-child(3){
  background: linear-gradient(90deg, rgb(115, 5, 148), rgb(225, 149, 255));
}
a.piBtn:nth-child(4){
  background: linear-gradient(90deg, rgb(138, 4, 22), rgb(248, 141, 141));
}
.piBtnSpan{
  position: absolute;
  background: #fff;
  pointer-events: none;
  border-radius: 50%;
  transform:translate(-50%, -50%);
  animation: animate 0.5s linear infinite;
}

@keyframes animate{
  0%{
    width:0px;
    height:0px;
    opacity:0.7;
  }
  100%{
    width:200px;
    height:200px;
    opacity:0;
  }
}

JS

const buttons = document.querySelectorAll('.piBtn');
buttons.forEach(btn=>{
    btn.addEventListener('click', function(e){
        let ripples = document.createElement('span');
        ripples.className = "piBtnSpan";
        let x = e.clientX - e.target.offsetLeft;
        let y = e.clientY - e.target.offsetTop;
        ripples.style.left = x + 'px';
        ripples.style.top = y + 'px';
        btn.appendChild(ripples);
        setTimeout(()=>{ripples.remove()},500);
    })
})

Lekkie przeróbki, by dopasować do wordpressa

W pliku functions należy dodać referencję do pliku js, w tym przypadku jest to plik public.js

function pikademia_scripts() {
    wp_enqueue_style( 'pikademia-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
    wp_enqueue_script('pikademia-public-script', get_template_directory_uri() .'/public.js', array('jquery'),rand(), true );
}
add_action( 'wp_enqueue_scripts', 'pikademia_scripts' );
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;
    }
}
const buttons = document.querySelectorAll('.wp-block-button__link');
buttons.forEach(btn=>{
    btn.className = 'piBtn';
    btn.addEventListener('click', function(e){
        let ripples = document.createElement('span');
        ripples.className = "piBtnSpan";
        let x = e.pageX - e.target.offsetLeft;
        let y = e.pageY - e.target.offsetTop;
        ripples.style.left = x + 'px';
        ripples.style.top = e.target.offsetHeight/2 + 'px';
        btn.appendChild(ripples);
        setTimeout(()=>{ripples.remove()},300);
    })
})

w jQuery

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()},500);
        })
    })
})