Button ready code

To have this beautiful button on your WordPress site, it is enough:

first stage:

First, copy the HTML code below and select the HTML element from the Elementor on your WordPress site and paste the code in it.

<div>
<button class=”btn”><i class=”animation”></i>BUTTON<i class=”animation”></i>
</button>
</div>

second stage:

In the next step, copy the following CSS code and paste the code in the custom CSS field.

.btn {
outline: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
background: #40B3A2;
min-width: 200px;
border: 0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
box-sizing: border-box;
padding: 16px 20px;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}

.btn:hover {
opacity: .95;
}

.btn .animation {
border-radius: 100%;
animation: ripple 0.6s linear infinite;
}

@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
}

100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
}
}