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);
})
})
})