:root { --e-global-color-primary: #FFD012; --e-global-color-secondary: #0B3665; --eel-gradient-1: #4750CC; --eel-gradient-2: #EF5CE8; --eel-gradient-3: #EFC7AE; } .eel-button-gradient { position: relative; overflow: hidden; } .eel-button-gradient::after, .eel-button-gradient::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.6s ease-in-out; z-index: 0; } .eel-button-gradient::after { background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%); opacity: 1; } .eel-button-gradient::before { background: linear-gradient(-68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%); opacity: 0; } .eel-button-gradient:hover::after { opacity: 0; } .eel-button-gradient:hover::before { opacity: 1; } .eel-button-gradient span { position: relative; z-index: 1; } .elementor-widget-eel-button .eel-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer; font-family: inherit; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: all 0.5s ease; position: relative; overflow: hidden; white-space: nowrap; line-height: 1.5; padding: 10px 20px; border-radius: 5px; } .elementor-widget-eel-button .eel-button:hover { text-decoration: none; transform: translateY(-1px); } .eel-button-primary { background-color: var(--e-global-color-primary); color: #ffffff; } .eel-button-primary:hover { background-color: var(--e-global-color-secondary); border-color: var(--e-global-color-secondary); } .eel-button-outline { background-color: transparent; color: var(--e-global-color-secondary); border: 2px solid var(--e-global-color-secondary); } .eel-button-outline:hover { background-color: var(--e-global-color-primary); } .eel-button-icon-before, .eel-button-icon-after { display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .eel-button-icon-before { margin-right: 8px; } .eel-button-icon-after { margin-left: 8px; } .eel-button .elementor-icon { display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .eel-button .elementor-icon i { font-size: inherit; color: inherit; } .eel-button .elementor-icon svg { width: 1em; height: 1em; } .eel-button .elementor-icon, .eel-button .elementor-icon i, .eel-button .elementor-icon svg { color: inherit; } .eel-button i, .eel-button svg, .eel-button .elementor-icon, .eel-button .elementor-icon i, .eel-button .elementor-icon svg, .eel-button .eicon, .eel-button .fas, .eel-button .far, .eel-button .fab, .eel-button .fa { color: inherit; font-size: inherit; } .eel-button svg, .eel-button .elementor-icon svg { width: 1em; height: 1em; } .elementor-widget-eel-button .eel-button img, .elementor-widget-eel-button .eel-button .eel-button-icon-before img, .elementor-widget-eel-button .eel-button .eel-button-icon-after img { width: 1em; height: 1em; -o-object-fit: contain; object-fit: contain; vertical-align: middle; } .elementor-widget-eel-button .eel-button .eel-button-icon-before svg, .elementor-widget-eel-button .eel-button .eel-button-icon-after svg { width: 1em; height: 1em; color: inherit; vertical-align: middle; } .elementor-widget-eel-button .eel-button .eel-button-icon-before svg path, .elementor-widget-eel-button .eel-button .eel-button-icon-after svg path { fill: currentColor; } .eel-button-text { display: inline-block; vertical-align: middle; } @keyframes eel-button-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .eel-button-icon_btn { background: transparent; } .eel-button-icon_btn .eel-button-icon-after, .eel-button-icon_btn .eel-button-icon-before { display: inline-grid; place-content: center; place-items: center; width: 64px; height: 64px; border-radius: 50%; background-color: var(--e-global-color-primary); color: #ffffff; margin-right: 16px; } .hover-gradient .eel-button-primary { position: relative; border: 2px solid transparent; overflow: hidden; } .hover-gradient .eel-button-primary::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.6s ease-in-out; z-index: 0; background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%); opacity: 0; } .hover-gradient .eel-button-primary:hover { background-color: unset !important; } .hover-gradient .eel-button-primary:hover::before { opacity: 1; } .hover-gradient .eel-button-primary span { position: relative; z-index: 1; } .eel-button.eel-button-border-gradient { z-index: 1; transition: all 0.4s ease; position: relative; background: #fff; color: currentColor; } .eel-button.eel-button-border-gradient::before { content: ""; position: absolute; inset: 0; padding: 2px; /* border width */ background: linear-gradient(90deg, #A53E1B 0%, #173998 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; transition: background 0.5s ease; } .eel-button.eel-button-border-gradient:hover { color: #fff; background: linear-gradient(90deg, #A53E1B, #173998); }