Добавим стилей.
CSS
/*СТИЛИ ЭФФЕКТА НА КНОПКУ*/
a.effectbutton::before {
content: '';
border-radius: 1000px;
min-width: calc(300px + 12px);
min-height: calc(60px + 12px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .3s ease-in-out 0s;
}
a.effectbutton:hover, a.effectbutton:focus {
color: #313133;
transform: translateY(-6px);
}
a.effectbutton:hover::before, a.effectbutton:focus::before {
opacity: 1;
}
a.effectbutton::after {
content: '';
width: 30px; height: 30px;
border-radius: 100%;
border: 6px solid #62339b; /*Отвечает за цвет и толщину кругов*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 5s infinite; /*Отвечает за общее время анимации = 100%*/
}
a.effectbutton:hover::after, a.effectbutton:focus::after {
animation: none;
display: none;
}
@keyframes ring { /*Этими стилями мы создаем время анимации включая паузу между анимациями*/
0% {
width: 30px;
height: 30px;
opacity: 1;
}
20% {
width: 300px;
height: 300px;
opacity: 0;
}
100% {
width: 300px; /*На сколько будут расходится круги от объекта*/
height: 300px;
opacity: 0;
}
}
Теперь добавляя класс "effectbutton" мы получим этот эффект на выбранном элементе.