.rs-button-rotating {
display: inline-block;
}
.rs-button-rotating a {
display: block;
position: relative;
width: 150px;
height: 150px;
background: var(--primaryColor);
border-radius: 50%;
padding: 2px;
z-index: 5;
border-color: var(--borderColor);
}
.rs-button-rotating a > * {
z-index: 1;
}
.rs-button-rotating a .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: var(--primaryColor);
border-radius: 50%;
text-align: center;
padding: 20px;
z-index: 1;
}
.rs-button-rotating a .button-logo i, .rs-button-rotating a .button-logo svg {
transition: var(--transition);
}
.rs-button-rotating a .button-logo img {
width: auto;
height: 100%;
}
.rs-button-rotating a .text-wrapper-parent {
position: relative;
width: 100%;
height: 100%;
pointer-events: none;
}
.rs-button-rotating a .text-wrapper-parent .rs-lettering-text {
position: inherit;
width: inherit;
height: inherit;
}
.rs-button-rotating a .text-wrapper-parent .rs-lettering-text span {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
color: var(--titleColor);
}
.rs-button-rotating.text-anim-yes a .rs-lettering-text {
animation: button-text-anim 30s infinite linear;
}
.rs-button-rotating.text-anim-pause-yes a:hover .rs-lettering-text {
animation-play-state: paused;
}
.rs-button-rotating.image-anim-yes a .button-logo img {
animation: button-image-anim 1s infinite alternate;
}
.rs-button-rotating.overlay-yes a::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--whiteColor);
border-radius: 50%;
pointer-events: none;
}
.rs-button-rotating.colors-shape-yes {
position: relative;
margin-right: 100px;
}
.rs-button-rotating.colors-shape-yes .color-shape {
--size-measure: 39px;
pointer-events: none;
position: absolute;
left: calc(100% - 65px);
top: 50%;
transform: translateY(-50%);
background: #0585f2;
height: var(--size-measure);
width: 163px;
border-radius: 0 30px 30px 0;
z-index: 0;
}
.rs-button-rotating.colors-shape-yes .color-shape:before, .rs-button-rotating.colors-shape-yes .color-shape:after {
height: inherit;
width: calc(100% - 26px);
position: absolute;
left: 0;
content: "";
border-radius: inherit;
transition: var(--transition);
transform: translateX(0);
}
.rs-button-rotating.colors-shape-yes .color-shape:after {
background: #82dd00;
top: calc(-1 * var(--size-measure));
}
.rs-button-rotating.colors-shape-yes .color-shape:before {
background: #5002c8;
bottom: calc(-1 * var(--size-measure));
}
.rs-button-rotating.colors-shape-yes:hover .color-shape:before, .rs-button-rotating.colors-shape-yes:hover .color-shape:after {
transform: translateX(-5px);
}
@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);
}
}