.rivax-advanced-button-wrapper { display: inline-flex; } .rivax-advanced-button { --button-shadow: 0 2px 12px #31333b54; position: relative; overflow: hidden; display: inline-flex; padding: 7px 20px; user-select: none; cursor: pointer; text-decoration: none; color: inherit; font-size: 0.9rem; border-radius: 3px; letter-spacing: 0.5px; line-height: 1.6; outline: none; transition: 0.5s cubic-bezier(.25,.7,.24,.91); direction: ltr; } body.rtl .rivax-advanced-button .title { direction: rtl; } .rivax-advanced-button .bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; transition: inherit; } .rivax-advanced-button .title-wrap { display: flex; gap: 5px; align-items: center; position: relative; transition: inherit; } .rivax-advanced-button .title { display: inline-block; position: relative; transition: inherit; } .rivax-advanced-button .icon { font-size: 110%; transition: inherit; } .rivax-advanced-button .icon, .rivax-advanced-button i { vertical-align: middle; display: inline-block; position: relative; } .rivax-advanced-button .icon svg{ width: 1em; height: 1em; fill: currentColor; display: block; } .rivax-advanced-button.icon-right .icon { order: 2; } .rivax-advanced-button-widget.btn-skew-yes .rivax-advanced-button { transform: skewX(-10deg); } .rivax-advanced-button-widget.btn-skew-yes .rivax-advanced-button .title-wrap { transform: skewX(10deg); } .rivax-advanced-button.hover-title-up .title::after, .rivax-advanced-button.hover-title-left .title::after { content: attr(data-title); display: inline-block; position: absolute; white-space: nowrap; top: 50%; left: 100%; transform: translate(50%, -50%); opacity: 0; transition: inherit; } .rivax-advanced-button.hover-title-up .title::after { left: 0; transform: translateY(100%); } .rivax-advanced-button.hover-title-left:hover .title { transform: translateX(-200%); } .rivax-advanced-button.hover-title-up:hover .title { transform: translateY(-200%); } .rivax-advanced-button.hover-title-left:hover .title::after { opacity: 1; transform: translate(100%, -50%); } .rivax-advanced-button.hover-title-up:hover .title::after { opacity: 1; transform: translateY(150%); } .rivax-advanced-button.hover-icon-fade.icon-right .title { transform: translateX(10px); } .rivax-advanced-button.hover-icon-fade.icon-right .icon { transform: translateX(-10px); opacity: 0; } .rivax-advanced-button.hover-icon-fade.icon-left .title { transform: translateX(-10px); } .rivax-advanced-button.hover-icon-fade.icon-left .icon { transform: translateX(10px); opacity: 0; } .rivax-advanced-button.hover-icon-fade:hover .title, .rivax-advanced-button.hover-icon-fade:hover .icon { transform: translateX(0); opacity: 1; } .rivax-advanced-button.hover-icon-up .icon { overflow: hidden; } .rivax-advanced-button.hover-icon-up .icon > * { transition: inherit; } .rivax-advanced-button.hover-icon-up .icon > *:nth-child(2) { position: absolute; left: 0; top: 0; transform: translateY(110%); } .rivax-advanced-button.hover-icon-up:hover .icon > *:nth-child(1) { transform: translateY(-110%); } .rivax-advanced-button.hover-icon-up:hover .icon > *:nth-child(2) { transform: translateY(0); } .rivax-advanced-button.style-1 { background: var(--button-bg); color: #fff; } .rivax-advanced-button.style-1:hover { --button-bg: var(--button-bg-hover); box-shadow: var(--button-shadow); } .rivax-advanced-button.style-2 { border: 2px solid var(--button-bg); color: var(--button-bg); } .rivax-advanced-button.style-2:hover { background: var(--button-bg); color: #fff; box-shadow: var(--button-shadow); } .rivax-advanced-button.style-3 { background: var(--button-bg); color: #fff; } .rivax-advanced-button.style-3:hover { box-shadow: var(--button-shadow); } .rivax-advanced-button.style-3::before { content: ''; display: block; width: 0px; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: #fff; box-shadow: 0 0 40px 30px #fff; transform: skewX(-20deg); } .rivax-advanced-button.style-3:hover::before { animation: btnShine 0.5s linear; } @keyframes btnShine { from { opacity: 0; left: 0%; } 50% { opacity: 1; } to { opacity: 0; left: 100%; } } .rivax-advanced-button.style-4 { border: 2px solid var(--button-bg); color: var(--button-bg); } .rivax-advanced-button.style-4 .bg { transform: scaleY(0); background: var(--button-bg); transition-property: transform; transform-origin: top; } .rivax-advanced-button.style-4:hover { color: #fff; } .rivax-advanced-button.style-4:hover .bg { transform: scaleY(1); transform-origin: bottom; } .rivax-advanced-button.style-5 { border: 2px solid var(--button-bg); color: var(--button-bg); } .rivax-advanced-button.style-5 .bg { transform: scaleX(0); background: var(--button-bg); transition-property: transform; transform-origin: right; } .rivax-advanced-button.style-5:hover { color: #fff; } .rivax-advanced-button.style-5:hover .bg { transform: scaleX(1); transform-origin: left; } .rivax-advanced-button.style-6 { --button-bg: #5a6ef8; --bg-02: #ff85cc; background: linear-gradient(to right, var(--button-bg), var(--bg-02)); } .rivax-advanced-button.style-6::before { content: ''; position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px; background: var(--body-bg-color); border-radius: inherit; transition: inherit; } .rivax-advanced-button.style-6:hover::before { opacity: 0; } .rivax-advanced-button.style-6:hover { color: #fff; } .rivax-advanced-button.style-7 { --button-bg: #5a6ef8; --bg-02: #ff85cc; color: #fff; background: linear-gradient(to right, var(--button-bg), var(--bg-02)); background-size: 160% 100%; } .rivax-advanced-button.style-7:hover { background-size: 100% 100%; } .rivax-advanced-button.style-8 { --button-bg: #5a6ef8; --bg-02: #ff85cc; color: #fff; background: linear-gradient(45deg, var(--button-bg), var(--bg-02), var(--button-bg)); background-size: 200% 100%; } .rivax-advanced-button.style-8:hover { background-position: right center; } .rivax-advanced-button.style-9 { overflow: visible; transition: 0.4s ease-out; } .rivax-advanced-button.style-9:hover { color: #fff; } .rivax-advanced-button.style-9::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-shadow: 0 0 0 2px currentColor; border-radius: 100px; transition: inherit; } .rivax-advanced-button.style-9:hover::before { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 12px transparent; } .rivax-advanced-button.style-9 .bg { background: var(--button-bg); clip-path: circle(0%); opacity: 0; border-radius: inherit; } .rivax-advanced-button.style-9:hover .bg { clip-path: circle(100%); opacity: 1; } .rivax-advanced-button.style-10 { --button-bg: #f1f3f5; --bg-02: var(--accent-color); border-radius: 100px; border: 1px solid #d2d6da; } .rivax-advanced-button.style-10 .bg { background: var(--button-bg); border-radius: inherit; border: 1px solid transparent; background-clip: padding-box; } .rivax-advanced-button.style-10::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); width: 300px; height: 300px; background-position: 0 0; background-repeat: no-repeat; background-image: conic-gradient(rgba(0, 0, 0, 0), var(--bg-02), rgba(0, 0, 0, 0) 25%); animation: btn-pulse-border 3s linear infinite; } @keyframes btn-pulse-border { 100% { transform: translate(-50%, -50%) rotate(1turn); } } .rivax-advanced-button.style-11 { --button-bg: #1b1c1d; overflow: visible; border-radius: 100px; } .rivax-advanced-button.style-11:hover { color: #fff; } .rivax-advanced-button.style-11 .circle { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 40px; width: 40px; background: var(--button-bg); border-radius: inherit; transition: inherit; } .rivax-advanced-button.style-11:hover .circle { width: 100%; } .rivax-advanced-button.style-11 .title-wrap { margin-left: 30px; } .rivax-advanced-button.style-11 .arrow { transition: inherit; position: absolute; top: 20px; left: 4px; width: 20px; height: 2px; } .rivax-advanced-button.style-11 .arrow::before { position: absolute; content: ""; top: -5px; left: 8px; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); } .rivax-advanced-button.style-11:hover .arrow { background: #fff; transform: translateX(12px); } .rivax-advanced-button.style-12, .rivax-advanced-button.style-13 { background: var(--button-bg); color: #fff; } .rivax-advanced-button.style-12:hover, .rivax-advanced-button.style-13:hover { --button-bg: var(--button-bg-hover); box-shadow: var(--button-shadow); } .rivax-advanced-button.style-12:hover .title { animation: btnMarqueeX 2s linear infinite; } .rivax-advanced-button.style-13 .title { animation: btnMarqueeX 1.7s linear infinite; } @keyframes btnMarqueeX { 0% { transform: translateX(0) } 100% { transform: translateX(-200%) } } .rivax-advanced-button.style-12 .title::after, .rivax-advanced-button.style-13 .title::after { content: attr(data-title); display: inline-block; position: absolute; white-space: nowrap; top: 50%; left: 100%; transform: translate(100%, -50%); } .rivax-advanced-button.style-14 { border: 2px solid var(--button-bg); color: var(--button-bg); } .rivax-advanced-button.style-14 .bg { background: var(--button-bg); border-radius:150px; width: 15px; height: 15px; transform: translate(-50%, 50%) scale(0); left: 50%; bottom: 50%; } .rivax-advanced-button.style-14:hover { color: #fff; box-shadow: var(--button-shadow); } .rivax-advanced-button.style-14:hover .bg { transform: translate(-50%, 50%) scale(20); transition: 1s; } .rivax-advanced-button.style-15 { background: var(--button-bg); color: #fff; overflow:visible; } .rivax-advanced-button.style-15:hover { box-shadow: var(--button-shadow); } .rivax-advanced-button.style-15 .bg { background: var(--button-bg); border-radius:inherit; } .rivax-advanced-button.style-15:hover .bg { transform: scale(1.4, 1.6); opacity: 0; } .rivax-advanced-button.style-16 { background: var(--button-bg); color: #fff; } .rivax-advanced-button.style-16:hover { box-shadow: var(--button-shadow); } .rivax-advanced-button.style-16 .bg { background: #fff; border-radius:150px; width: 15px; height: 15px; transform: translate(-50%, 50%) scale(0); left: 50%; bottom: 50%; opacity: 0.6; transition: none; } .rivax-advanced-button.style-16:hover .bg { transform: translate(-50%, 50%) scale(20); opacity: 0; transition: 0.5s ease-in-out; } .rivax-advanced-button.style-17 { background: var(--button-bg); --bg-02: var(--button-bg); color: #fff; overflow: visible; } .rivax-advanced-button.style-17:before, .rivax-advanced-button.style-17:after { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1000; background-repeat: no-repeat; color: var(--bg-02); } .rivax-advanced-button.style-17:hover:before { top: -70%; background-image: radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, transparent 20%, currentColor 20%, transparent 30%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, transparent 10%, currentColor 15%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%); background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; background-position: 50% 120%; animation: btnTopBubbles 0.6s ease; } @keyframes btnTopBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } .rivax-advanced-button.style-17:hover::after { bottom: -70%; background-image: radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, transparent 10%, currentColor 15%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%), radial-gradient(circle, currentColor 20%, transparent 20%); background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; background-position: 50% 0%; animation: btnBottomBubbles 0.6s ease; } @keyframes btnBottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } }