.button__holder {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.button__holder:after {
content: "";
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.plus {
position: relative;
z-index: 1;
width: 80px;
height: 80px;
color: #fff;
background: #ed1c5b;
border-radius: 50%;
border: none;
transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);
box-shadow: 0 3px 23px 0 rgba(227, 35, 90, 0.6);
}
.plus:before,
.plus:after {
border: 1px solid #ed1c5b;
content: "";
width: 100%;
display: block;
position: absolute;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 100%;
transform-origin: center center;
opacity: 0;
box-sizing: border-box;
}
.plus:before {
animation: 1s 0.1s pulse2 infinite linear;
}
.plus::after {
animation: 1s pulse infinite linear;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.2;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
@keyframes pulse2 {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.plus:hover {
transform: none;
border: 5px solid #ed1c5b;
box-shadow: 0 0 1px 15px rgba(138, 59, 88, 0.4), 0 0 1px 30px rgba(138, 59, 88, 0.1), 0 0 1px 45px rgba(138, 59, 88, 0.1);
} |
