.rs-button-rotating {
position: relative;
width: 150px;
height: 150px;
background: #F55B1F;
border-radius: 50%;
padding: 2px;
}
.rs-button-rotating .button-logo {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
display: flex;
align-items: center;
justify-content: center;
height: 90px;
transform: translate(-50%, -50%);
background: #121315;
border-radius: 50%;
text-align: center;
padding: 20px;
z-index: 1;
}
.rs-button-rotating .button-logo i, .rs-button-rotating .button-logo svg {
transition: all 0.3s ease 0s;
}
.rs-button-rotating .button-logo img {
width: auto;
height: 100%;
}
.rs-button-rotating .text-wrapper-parent {
position: relative;
width: 100%;
height: 100%;
}
.rs-button-rotating .text-wrapper-parent .text-wrapper {
position: inherit;
width: inherit;
height: inherit;
}
.rs-button-rotating .text-wrapper-parent .text-wrapper span {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.rs-button-rotating.text-anim-yes .text-wrapper {
animation: button-text-anim 30s infinite linear;
}
.rs-button-rotating.text-anim-pause-yes:hover .text-wrapper {
animation-play-state: paused;
}
.rs-button-rotating.image-anim-yes .button-logo img {
animation: button-image-anim 1s infinite alternate;
}
@keyframes button-text-anim {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
@keyframes button-image-anim {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
}
}