@keyframes king-addons-creative-btn-move-up-start { to { transform: translate3d(0, -105%, 0); } } @keyframes king-addons-creative-btn-move-up-end { 0% { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes king-addons-creative-btn-move-scale-up-start { to { opacity: 0; transform: translate3d(0, -105%, 0) scale3d(1, 2, 1); } } @keyframes king-addons-creative-btn-move-scale-up-end { 0% { opacity: 0; transform: translate3d(0, 100%, 0) scale3d(1, 2, 1); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .king-addons-creative-btn-wrap { display: inline-block; --king-addons-creative-btn-bg-color: #ffffff; --king-addons-creative-btn-bg-hover-color: #574ff7; --king-addons-creative-btn-border-color: #574ff7; --king-addons-creative-btn-border-hover-color: #574ff7; --king-addons-creative-btn-txt-color: #574ff7; --king-addons-creative-btn-txt-hover-color: #ffffff; --king-addons-creative-btn-effect-apex-delay: .045s; } .king-addons-creative-btn-wrap .king-addons-creative-btn { font-size: 14px; line-height: 1; position: relative; z-index: 0; display: inline-block; max-width: 100%; padding: 15px 25px; transition: all .3s; text-align: center; text-decoration: none; color: var(--king-addons-creative-btn-txt-color); border-color: var(--king-addons-creative-btn-border-color); border-radius: 5px; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn:hover { border-color: var(--king-addons-creative-btn-border-hover-color); background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome { padding: 25px 80px; cursor: pointer; border-width: 3px; border-style: solid; border-radius: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome:after { position: absolute; z-index: -1; content: ''; transition: all .3s; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome:hover { color: var(--king-addons-creative-btn-txt-hover-color); background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-fill:after { top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-fill:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-fill:hover, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism:hover, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr:hover { color: var(--king-addons-creative-btn-txt-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-fill:active:after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-fill:hover:after { opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-down:after { top: 0; left: 0; width: 100%; height: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-down:active:after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-down:hover:after { height: 100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-right:after { top: 0; left: 0; width: 0; height: 100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-right:active:after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-right:hover:after { width: 100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-diagonal, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-x, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-y { overflow: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-x:after { top: 50%; left: 50%; width: 0; height: 103%; transform: translateX(-50%) translateY(-50%); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-x:hover:after { width: 90%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-x:active:after { width: 101%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-diagonal:after { top: 50%; left: 50%; width: 100%; height: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-diagonal:hover:after { height: 260%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-diagonal:active:after { height: 400%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-y:after { top: 50%; left: 50%; width: 101%; height: 0; transform: translateX(-50%) translateY(-50%); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-y:hover:after { height: 75%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome.king-addons-creative-btn-effect-slide-y:active:after { height: 130%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-rome, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show { font-weight: 700; display: inline-block; overflow: hidden; letter-spacing: 1px; text-transform: uppercase; color: var(--king-addons-creative-btn-txt-color); outline: 0; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show { padding: 25px 80px; border-width: 3px; border-style: solid; border-radius: 50px; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-ember:hover, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show:hover { color: var(--king-addons-creative-btn-txt-hover-color); background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show > i { position: absolute; top: 50%; transition: left .3s, right .3s; transform: translateY(-50%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-right i { left: 130%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-right:active i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-right:hover i { left: 80%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-left i { left: -50%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-left:active i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-in-left:hover i { left: 10%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-right i { left: 70%; opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-right:active i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-right:hover i { left: 80%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-left i { left: 30%; opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-left:active i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-show.king-addons-creative-btn-effect-back-out-left:hover i { left: 10%; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide { padding: 0 !important; cursor: pointer; border-radius: 0; backface-visibility: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide:hover { color: var(--king-addons-creative-btn-txt-hover-color); border-color: var(--king-addons-creative-btn-border-hover-color); background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide > span { display: inline-block; padding: 25px 80px; transition: all .3s; backface-visibility: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide > i { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: all .3s; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-down:hover > span { transform: translateY(300%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-down > i { top: -100%; left: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-down:hover > i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-top:hover > i { top: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-top:hover > span { transform: translateY(-300%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-top > i { top: 100%; left: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-right:hover > span { transform: translateX(200%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-right > i { top: 0; left: -100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-left:hover > i, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-right:hover > i { left: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-left:hover > span { transform: translateX(-200%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide.king-addons-creative-btn-effect-slide-in-left > i { top: 0; left: 100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-icon-slide, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris { border-width: 3px; border-style: solid; border-color: var(--king-addons-creative-btn-border-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris:hover { color: var(--king-addons-creative-btn-txt-hover-color); border-color: var(--king-addons-creative-btn-border-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene { z-index: 1; overflow: hidden; padding: 0 !important; cursor: pointer; border-radius: 0; outline: 0; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene > span { padding: 25px 80px; transition: transform .3s, opacity .3s; transition-timing-function: cubic-bezier(.2, 1, .3, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene > span { display: block; vertical-align: middle; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene::after { position: absolute; top: 0; left: 0; content: attr(data-text); transform: translate(0, 25%); opacity: 0; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene:hover > span { transform: translate(0, -25%); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene:hover::after { transform: translate(0, 0); opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr::before { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 25px 80px; content: attr(data-text); --king-addons-creative-btn-effect-zephyr-width: calc(-100% - 1px); transform: translate3d(var(--king-addons-creative-btn-effect-zephyr-width), 0, 0); background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr > span { transition: transform .3s; transition-timing-function: cubic-bezier(.75, 0, .125, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr > span { display: block; padding: 25px 80px; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr:hover::before { transform: translate3d(0, 0, 0); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism:hover::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism:hover::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr:hover > span { transform: translate3d(0, 100%, 0); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism { z-index: 1; overflow: hidden; padding: 25px 80px; cursor: pointer; border-radius: 0; outline: 0; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::before { position: absolute; z-index: -1; bottom: 100%; left: 0; width: 100%; height: 100%; content: ''; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::before { opacity: .7; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex:hover { background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-prism:hover::after { transition-delay: .175s; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-ember { z-index: 1; padding: 25px 80px; cursor: pointer; border-width: 0; border-radius: 0; outline: 0; background: var(--king-addons-creative-btn-bg-color); --king-addons-creative-btn-bg-color: #574ff7; --king-addons-creative-btn-bg-hover-color: #ffffff; --king-addons-creative-btn-border-color: #ffffff; --king-addons-creative-btn-border-hover-color: #574ff7; --king-addons-creative-btn-txt-color: #ffffff; --king-addons-creative-btn-txt-hover-color: #574ff7; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-ember::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ''; transition: all .3s; transition-timing-function: cubic-bezier(.75, 0, .125, 1); transform: scale3d(.6, .6, 1); opacity: 0; border-width: 2px; border-style: solid; border-radius: inherit; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-ember:hover::before { transform: scale3d(1, 1, 1); opacity: 1; border-color: var(--king-addons-creative-btn-border-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex { overflow: hidden; padding: 25px 80px; transition: background .3s; color: var(--king-addons-creative-btn-txt-color); background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex > span { transition: transform .3s, opacity .3s; transition-timing-function: cubic-bezier(.75, 0, .125, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex > span { display: inline-block; transform: translate3d(0, -10px, 0); opacity: 0; color: var(--king-addons-creative-btn-txt-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex::before { position: absolute; top: 0; left: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex::before { padding: 25px 80px; content: attr(data-text); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex:hover::before { transform: translate3d(0, 100%, 0); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex:hover > span { transition-delay: var(--king-addons-creative-btn-effect-apex-delay, .045s); transform: translate3d(0, 0, 0); opacity: 1; color: var(--king-addons-creative-btn-txt-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex { padding: 25px 80px; border-width: 0; background: var(--king-addons-creative-btn-bg-hover-color); --king-addons-creative-btn-bg-color: #574ff7; --king-addons-creative-btn-bg-hover-color: #ffffff; --king-addons-creative-btn-border-color: #ffffff; --king-addons-creative-btn-border-hover-color: #574ff7; --king-addons-creative-btn-txt-color: #ffffff; --king-addons-creative-btn-txt-hover-color: #574ff7; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::before { z-index: -1; content: ''; pointer-events: none; border-radius: inherit; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::before { width: 100%; height: 100%; transform: scale3d(1.2, 1.2, 1); opacity: 0; border-width: 2px; border-style: solid; border-color: var(--king-addons-creative-btn-border-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex::after { width: 100%; height: 100%; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex:hover::before { transform: scale3d(1, 1, 1); opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-vortex:hover::after { transform: scale3d(.8, .8, 1); opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-brilliance { overflow: hidden; padding: 25px 80px; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-brilliance::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ''; transition: transform .3s; transform: scale3d(0, 0, 0); border-radius: inherit; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-brilliance:hover::before { transform: scale3d(1.1, 1.1, 1.1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-brilliance > span { pointer-events: none; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london { padding: 25px 80px; color: var(--king-addons-creative-btn-txt-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london:hover { color: var(--king-addons-creative-btn-txt-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-morph { font-weight: 700; display: inline-flex; overflow: hidden; align-items: center; padding: 20px 25px; color: var(--king-addons-creative-btn-txt-color); border-width: 2px; border-style: solid; border-radius: 0; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-morph span { position: relative; display: inline-block; overflow: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-morph span.king-addons-creative-btn-morph-text { width: 0; transition: width .2s; white-space: nowrap; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-morph:hover span.king-addons-creative-btn-morph-text { width: auto; margin-right: 10px; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-glide { font-weight: 700; overflow: hidden; border-width: 2px; border-style: solid; border-radius: 3em; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-glide span { position: relative; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start::before, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-glide::before { content: ''; transition: transform .3s cubic-bezier(.7, 0, .2, 1); background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-glide:hover::before { transform: translate(0, -100%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start { font-weight: 500; overflow: hidden; padding: 25px 80px; border-width: 2px; border-style: solid; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start span { position: relative; display: block; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start > span, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start > span > span { overflow: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start:hover > span > span { animation: king-addons-creative-btn-move-up-start .2s forwards, king-addons-creative-btn-move-up-end .2s forwards .2s; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start::before { transform-origin: 100% 50%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-fresh-start:hover::before { transform: scale3d(0, 1, 1); transform-origin: 0 50%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate { overflow: hidden; border-width: 2px; border-style: solid; border-color: var(--king-addons-creative-btn-border-color); border-radius: .5em; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate > span { position: relative; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate::before { left: -10%; width: 120%; content: ''; transition: transform .4s cubic-bezier(.3, 1, .8, 1); transform: skew(30deg); background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade:hover .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:hover .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:active, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate:hover .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate:active { border-color: var(--king-addons-creative-btn-border-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-illuminate:hover::before { transform: translate3d(100%, 0, 0); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate { overflow: hidden; border-width: 2px; border-style: solid; border-color: var(--king-addons-creative-btn-border-color); border-radius: .85em; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate > span { position: relative; z-index: 10; display: block; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:hover span { animation: king-addons-creative-btn-move-scale-up-start .3s forwards, king-addons-creative-btn-move-scale-up-end .3s forwards .3s; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate::before { top: -110%; left: -10%; width: 120%; height: 0; padding-bottom: 120%; content: ''; transform: translate3d(0, 68%, 0) scale3d(0, 0, 0); border-radius: 50%; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:hover::before { transition: transform .4s cubic-bezier(.1, 0, .3, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:hover::before { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate::after { content: ''; transform: translate3d(0, -100%, 0); background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-elevate:hover::after { transition-delay: .4s; transition-timing-function: linear; transition-duration: .05s; transform: translate3d(0, 0, 0); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade { font-weight: 500; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; box-sizing: border-box; width: 100px; height: 100px; padding: 0; border-width: 2px; border-style: solid; border-color: var(--king-addons-creative-btn-border-color); border-radius: 50%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade span { position: relative; display: block; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade > span { overflow: hidden; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade:hover > span > span { animation: king-addons-creative-btn-move-scale-up-start .2s forwards, king-addons-creative-btn-move-scale-up-end .2s forwards .2s; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade::before { width: 100%; height: 0; padding-bottom: 100%; content: ''; transition: transform .3s; transition-timing-function: cubic-bezier(.7, 0, .2, 1); transform: translate3d(0, 0, 0); border-radius: 50%; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-cascade:hover::before { transform: translate3d(0, 100%, 0); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish { padding: 0 !important; border-width: 0 !important; background: 0 0; --king-addons-creative-btn-bg-color: #574ff7; --king-addons-creative-btn-bg-hover-color: #ffffff; --king-addons-creative-btn-txt-color: #ffffff; --king-addons-creative-btn-txt-hover-color: #574ff7; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish:hover div::before { transition: transform .4s cubic-bezier(.1, 0, .3, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; border-width: 2px; border-style: solid; border-color: var(--king-addons-creative-btn-border-color); border-radius: .85em; background: var(--king-addons-creative-btn-bg-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish:hover div { transform: scale3d(1.2, 1.2, 1); border-color: var(--king-addons-creative-btn-border-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div::after, .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div::before { position: absolute; content: ''; background: var(--king-addons-creative-btn-bg-hover-color); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div::before { top: 50%; left: 50%; width: 110%; height: 0; padding-bottom: 110%; transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1); border-radius: 50%; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish:hover div::before { transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div::after { top: 0; left: 0; width: 100%; height: 100%; transition: opacity .3s; opacity: 0; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish:hover div::after { transition-delay: .3s; transition-duration: .01s; opacity: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish span { position: relative; display: block; padding: 1.5em 3em; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate { font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; padding: 0; border-width: 0 !important; background: 0 0; --king-addons-creative-btn-border-color: #e8e8e8; --king-addons-creative-btn-border-hover-color: #574ff7; --king-addons-creative-btn-stroke-width: 1px; --king-addons-creative-btn-txt-color: #574ff7; --king-addons-creative-btn-txt-hover-color: #574ff7; clip-path: circle(50% at 50% 50%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate .king-addons-creative-btn-progress { position: absolute; top: 50%; left: 50%; overflow: visible; width: 96px; height: 96px; transition: transform .4s cubic-bezier(.7, 0, .3, 1); transform: translate(-50%, -50%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate:hover .king-addons-creative-btn-progress { transform: translate(-50%, -50%) scale3d(1.2, 1.2, 1); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate .king-addons-creative-btn-progress-circle { fill: none; stroke: var(--king-addons-creative-btn-border-color); stroke-width: var(--king-addons-creative-btn-stroke-width, 1px); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate .king-addons-creative-btn-progress-path { fill: none; stroke-width: var(--king-addons-creative-btn-stroke-width, 1px); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate:focus-visible .king-addons-creative-btn-progress-circle { fill: rgba(255, 255, 0, 50%); } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate .king-addons-creative-btn-progress-path { transition: stroke-dashoffset .4s cubic-bezier(.7, 0, .3, 1); stroke: var(--king-addons-creative-btn-border-hover-color); stroke-dasharray: 1; stroke-dashoffset: 1; } .king-addons-creative-btn-wrap .king-addons-creative-btn-style-london.king-addons-creative-btn-effect-radiate:hover .king-addons-creative-btn-progress-path { stroke-dashoffset: 0; }