/* * Buttons */ .w-btn, .button, button[type=submit], input[type=submit] { display: inline-block; vertical-align: top; text-align: center; line-height: 1.2; /* fallback value */ position: relative; transition-property: background, border, box-shadow, color, opacity, transform; -webkit-tap-highlight-color: rgba(0,0,0,0); } .w-btn, .button { padding: .8em 1.8em; /* fallback value */ } input[type=submit] { border-style: solid; border-width: var(--btn-border-width, 0px); } .w-btn i { display: inline-block; vertical-align: top; line-height: inherit; } .w-btn.icon_atleft i { margin-right: .5em; } .w-btn.icon_atright i { margin-left: .5em; } .w-btn.text_none i { margin: 0 !important; width: 1.2em; } .w-btn-label { display: inline-block; vertical-align: top; } /* element to immitate the border */ .w-btn:before, .button:before, button[type=submit]:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; border-width: var(--btn-border-width, 0px); border-style: solid; border-color: inherit; border-image: inherit; transition: inherit; } /* Border gradient animation */ .w-btn.with_border_animation { contain: paint; padding: 0 !important; background: none !important; } .w-btn.with_border_animation::after { display: none !important; } .w-btn.with_border_animation::before { top: 50%; aspect-ratio: 1; scale: 1.2; translate: 0 -50%; transition: none; border: none; animation: btnGradientRotate var(--border-animation-duration, 3s) linear infinite; } .w-btn.with_border_animation.play_on_hover:not(:hover)::before, .w-btn.with_border_animation.pause_on_hover:hover::before { animation-play-state: paused; } .w-btn-inner { display: inline-block; vertical-align: top; position: relative; z-index: 1; padding: .8em 1.8em; /* fallback value */ margin: var(--btn-border-width, 0px); width: calc( 100% - 2 * var(--btn-border-width, 0px) ); border-radius: inherit; background: var(--btn-background, var(--color-content-bg)); transition-duration: inherit; transition-timing-function: inherit; } .no-touch .w-btn:hover .w-btn-inner { background: var(--btn-hover-background, var(--color-content-bg)); } .links_underline a.w-btn, .links_underline a.button { text-decoration: none !important; } /* Button Wrapper */ .w-btn-wrapper { margin: .3rem 0; } .w-btn-wrapper[class*="align_none"] { display: inline-block; vertical-align: top; } *:not(.w-hwrapper) > .w-btn-wrapper[class*="align_none"] { margin-inline-end: .6rem; } .w-btn-wrapper.align_justify > .w-btn { width: 100%; } /* Badge style by default */ .us-btn-style_badge { padding: .7em 1.2em; border-radius: 9em; background: var(--color-content-primary-grad); color: #fff !important; } .no-touch .us-btn-style_badge:hover { background: var(--color-content-secondary-grad); } .us-btn-style_badge:before { display: none; } /* Text Hover Animations */ @keyframes btnTextStart_slideTop { 100% { transform: translate3d(0,105%,0); opacity: 0; } } @keyframes btnTextEnd_slideTop { 0% { transform: translate3d(0,-100%,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } } @keyframes btnTextStart_slideBottom { 100% { transform: translate3d(0,-105%,0); opacity: 0; } } @keyframes btnTextEnd_slideBottom { 0% { transform: translate3d(0,100%,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } } @keyframes btnTextStart_slideLeft { 100% { transform: translate3d(50%,0,0); opacity: 0; } } @keyframes btnTextEnd_slideLeft { 0% { transform: translate3d(-50%,0,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } } @keyframes btnTextStart_slideRight { 100% { transform: translate3d(-50%,0,0); opacity: 0; } } @keyframes btnTextEnd_slideRight { 0% { transform: translate3d(50%,0,0); opacity: 0; } 100% { transform: translate3d(0,0,0); opacity: 1; } } @keyframes btnTextStart_scaleUp { 100% { transform: scale(1.5); opacity: 0; } } @keyframes btnTextEnd_scaleUp { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes btnTextStart_scaleDown { 100% { transform: scale(0.2); opacity: 0; } } @keyframes btnTextEnd_scaleDown { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes btnGradientRotate { 0% { transform: translateZ(0) rotate(0); } 100% { transform: translateZ(0) rotate(360deg); } }