:root {
--btn-border: 1px solid rgba(255, 255, 255, 0.2);
--btn-bg: transparent;
--btn-shadow: 1px 1px 25px 10px rgba(255, 255, 255, 0.5);
--btn-text-color: #f4f4f4;
--shine-degree: 120deg;
--shine-color: rgba(255, 255, 255, 0.2);
--shine-effect: linear-gradient(var(--shine-degree), transparent, var(--shine-color), transparent);
}
.cta-button {
font-size: 1.1rem;
padding: 1rem 3rem;
border-radius: 4px;
text-decoration: none;
border: var(--btn-border);
color: var(--btn-text-color);
box-shadow: 0px 0px 15px #00000040;
text-align: center;
line-height: 1.4;
}
.cta-button.style1 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
overflow: hidden;
font-size: 1.1rem;
padding: 1rem 3rem;
border-radius: 4px;
text-decoration: none;
border: var(--btn-border);
color: var(--btn-text-color);
transition: opacity 0.5s ease-in-out, transform 0.13s ease-in-out, box-shadow 0.13s; }
.cta-button.style1::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: var(--shine-effect);
animation: shine-animation 5.7s linear infinite;
left: 0;
}
@keyframes shine-animation {
0%, 12.5% {
transform: translateX(-100%);
}
25%, 100% {
transform: translateX(100%);
}
}
.style1 {
transition: opacity 0.5s ease-in-out, transform 3s ease-in-out, box-shadow 0.13s; }
.style1:hover {
transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.43); }
.style1 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.cta-button.show {
opacity: 1;
}
.cta-button.red {
background-color: #C0392B;
}
.cta-button.green {
background-color: #009C41;
}
.cta-button.blue {
background-color: #2d55ff;
}
#cta-preview-container {
position: static !important;
overflow: visible !important;
margin-top: 10px;
}
#cta-preview-container .cta-button {
display: inline-block;
margin-top: 5px;
}
#cta-preview-container .cta-button.style1, #cta-preview-container .cta-button.style2, #cta-preview-container .cta-button.style3, #cta-preview-container .cta-button.style4 {
position: relative;
bottom: auto;
right: auto;
}
#cta-preview-container .cta-button {
opacity: 1 !important;
}
.cta-button.style2 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
overflow: hidden;
font-size: 1.1rem;
padding: 1rem 3rem;
border-radius: 4px;
text-decoration: none;
border: var(--btn-border);
color: var(--btn-text-color);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
transition: opacity 0.5s ease-in-out, transform 0.13s ease-in-out, box-shadow 0.13s;
opacity: 0;
border: 0 !important;
animation: gradient 15s ease infinite; }
.cta-button.style2:hover {
transform: scale(1.05) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.43);
}
.cta-button.style2.show {
opacity: 1;
transform: scale(1);
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.cta-button.style2::before {
content: none;
}
.cta-button.style2.show {
opacity: 1;
}
.cta-button.style3 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
overflow: hidden;
text-align: center;
animation-name: wiggle;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
opacity: 0;
border: var(--btn-border);
color: var(--btn-text-color);
transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.13s;
}
.cta-button.style3.show {
opacity: 1 !important;
}
.cta-button.style3:not(:hover) {
animation-name: wiggle;
}
.cta-button.style3:hover,
.cta-button.style3:active {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.43);
animation-name: none;
}
@keyframes wiggle {
2% {
transform: translateX(3px) rotate(2deg);
}
4% {
transform: translateX(-3px) rotate(-2deg);
}
6% {
transform: translateX(3px) rotate(2deg);
}
8% {
transform: translateX(-3px) rotate(-2deg);
}
10% {
transform: translateX(2px) rotate(1deg);
}
12% {
transform: translateX(-2px) rotate(-1deg);
}
14% {
transform: translateX(2px) rotate(1deg);
}
16% {
transform: translateX(-2px) rotate(-1deg);
}
18% {
transform: translateX(1px) rotate(0deg);
}
20% {
transform: translateX(-1px) rotate(0deg);
}
}
.cta-button.style4 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
overflow: hidden;
font-size: 1.1rem;
padding: 1rem 3rem;
border-radius: 4px;
text-decoration: none;
border: var(--btn-border);
color: var(--btn-text-color);
transition: opacity 0.5s ease-in-out, transform 0.13s ease-in-out, box-shadow 0.13s; }
.style4 {
transition: opacity 0.5s ease-in-out, transform 3s ease-in-out, box-shadow 0.13s; }
.style4:hover {
transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.43); }
.style4 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
opacity: 0;
transition: opacity 0.5s ease-in-out;
} @media (max-width: 767px) {
.cta-button {
right: auto !important;
margin: 0 20px;
}
.cta-button-contain {
display: flex;
justify-content: center;
align-items: center; }
}
ul.button-instructions {
list-style-type: disc;
margin-left: 20px;
}
ul.button-instructions li {
margin-bottom: 10px;
}
ul.button-instructions ul {
list-style-type: circle;
margin-left: 20px;
}
ul.button-instructions ul li {
margin-bottom: 5px;
}