<div class="mod-btn__wrap">
<a href="#" rel="nofollow" class="mod-btn">Текст текст</a>
</div>
.mod-btn__wrap {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.mod-btn {
margin-top: 32px;
position: relative;
font-size: 16px;
padding: 15px 40px;
border-radius: 25px;
background-color: #5864ff;
color: #fff !important;
text-decoration: none;
border: 2px solid #2634ff;
position: relative;
}
.mod-btn:hover {
color: #fff;
}
.mod-btn:after {
position: absolute;
top: 0;
left: 0;
content: "";
background-color: #5864ff;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 40px;
animation: growing 1.2s infinite;
}
@keyframes growing {
0% {
transform: scale(1, 1);
opacity: 0.7;
}
100% {
transform: scale(1.5, 2);
opacity: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.