22

✏️ Editing: ep-creative-button.rtl.css

.bdt-ep-creative-button{pointer-events:auto;cursor:pointer;color:#fff;background:#798184;padding:1.5rem 3rem;position:relative;display:inline-flex;align-items:center;justify-content:center}.bdt-ep-creative-button::before,.bdt-ep-creative-button::after{position:absolute;top:0;right:0;width:100%;height:100%}.bdt-ep-creative-button--pan{font-weight:700;border:2px solid #495157;border-radius:3rem;overflow:hidden;color:#fff}.bdt-ep-creative-button--pan span{position:relative}.bdt-ep-creative-button--pan::before{content:'';background:#495157;transition:transform .3s cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--pan:hover::before{transform:translate3d(0, -100%, 0)}.bdt-ep-creative-button--hyperion{font-weight:500;padding:1rem 1.5rem;border:1px solid #495157;overflow:hidden;color:#fff}.bdt-ep-creative-button--hyperion span{display:block;position:relative}.bdt-ep-creative-button--hyperion>span{overflow:hidden}.bdt-ep-creative-button--hyperion>span>span{overflow:hidden}.bdt-ep-creative-button--hyperion:hover>span>span{animation:MoveUpInitial .2s forwards,MoveUpEnd .2s forwards .2s}@keyframes MoveUpInitial{to{transform:translate3d(0, -105%, 0)}}@keyframes MoveUpEnd{from{transform:translate3d(0, 100%, 0)}to{transform:translate3d(0, 0, 0)}}.bdt-ep-creative-button--hyperion::before{content:'';background:#495157;transition:transform .3s cubic-bezier(.7, 0, .2, 1);transform-origin:0% 50%}.bdt-ep-creative-button--hyperion:hover::before{transform:scale3d(0, 1, 1);transform-origin:100% 50%}.bdt-ep-creative-button--mimas{text-transform:uppercase;letter-spacing:.05rem;font-weight:700;font-size:.85rem;border-radius:.5rem;overflow:hidden;color:#fff;background:#798184}.bdt-ep-creative-button--mimas span{position:relative}.bdt-ep-creative-button--mimas::before{content:'';background:#00202c;width:120%;right:-10%;transform:skew(-30deg);transition:transform .4s cubic-bezier(.3, 1, .8, 1)}.bdt-ep-creative-button--mimas:hover::before{transform:translate3d(-100%, 0, 0)}.bdt-ep-creative-button--atlas{font-weight:500}.bdt-ep-creative-button--atlas>span{display:inline-block}.bdt-ep-creative-button--atlas:hover>span{opacity:0}.bdt-ep-creative-button-marquee{position:absolute;top:0;right:0;width:100%;overflow:hidden;pointer-events:none}.bdt-ep-creative-button-marquee__inner{width:fit-content;display:flex;position:relative;--offset:1rem;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset));transform:translate3d(var(--move-initial), 0, 0);animation:marquee 1s linear infinite;animation-play-state:paused;opacity:0}.bdt-ep-creative-button--atlas:hover .bdt-ep-creative-button-marquee__inner{animation-play-state:running;opacity:1;transition-duration:.4s}.bdt-ep-creative-button-marquee span{text-align:center;white-space:nowrap;font-style:italic;padding:1.5rem .5rem}@keyframes marquee{0%{transform:translate3d(var(--move-initial), 0, 0)}100%{transform:translate3d(var(--move-final), 0, 0)}}.bdt-ep-creative-button--kari{font-weight:900;font-size:1.25rem;border-radius:50%;border:2px solid #798184}.bdt-ep-creative-button--kari>span{display:inline-block;transition:opacity .1s}.bdt-ep-creative-button--kari:hover>span{opacity:0}.bdt-ep-creative-button--kari .bdt-ep-creative-button-marquee{transform:rotate(2.75deg)}.bdt-ep-creative-button--kari:hover .bdt-ep-creative-button-marquee__inner{animation-play-state:running;opacity:1;transition-duration:.6s}.bdt-ep-creative-button--pandora{background:#798184;font-weight:700;padding:0;border-radius:5px}.bdt-ep-creative-button--pandora span{display:block;background:#a7a7a7;padding:1.5rem 2rem;border-radius:5px;transform:translate3d(4px, -4px, 0);transition:transform .3s cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--pandora:hover span{transform:translate3d(8px, -8px, 0)}.bdt-ep-creative-button--janus{font-weight:600;width:175px;height:120px;color:#fff;background:none !important;font-size:14px}.bdt-ep-creative-button--janus::before{content:'';background:#e6e6e6;-webkit-clip-path:path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");clip-path:path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");transition:clip-path .5s cubic-bezier(.585, 2.5, .645, .55),-webkit-clip-path .5s cubic-bezier(.585, 2.5, .645, .55),background .5s ease;z-index:1}.bdt-ep-creative-button--janus:hover::before{background:#798184;-webkit-clip-path:path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z");clip-path:path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z")}.bdt-ep-creative-button--janus::after{content:'';height:86%;width:97%;top:5%;border-radius:42% 58% 45% 55% / 45% 56% 44% 55%;border:1px solid #798184;transform:rotate(20deg);z-index:0;transition:transform .5s cubic-bezier(.585, 2.5, .645, .55)}.bdt-ep-creative-button--janus:hover::after{transform:translate3d(0, -5px, 0)}.bdt-ep-creative-button--janus span{display:block;transition:transform .3s ease;z-index:1}.bdt-ep-creative-button--janus:hover span{transform:translate3d(0, -10px, 0)}.bdt-ep-creative-button--anthe{color:#fff;background:none !important;overflow:hidden}.bdt-ep-creative-button--anthe::before{content:'';background:#798184;-webkit-clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);transition:clip-path .4s cubic-bezier(.2, 1, .8, 1),-webkit-clip-path .4s cubic-bezier(.2, 1, .8, 1)}.bdt-ep-creative-button--anthe:hover::before{background:#798184;-webkit-clip-path:polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);clip-path:polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%)}.bdt-ep-creative-button--anthe span{display:block;transition:transform .4s cubic-bezier(.2, 1, .8, 1);z-index:1}.bdt-ep-creative-button--anthe:hover span{transform:translate3d(10px, 0, 0)}.bdt-ep-creative-button--pallene{font-weight:700;border-radius:.5rem;border:2px solid #798184;box-shadow:inset 0 0 0 0 #798184;transition:border-radius .3s,box-shadow .3s,color .3s;transition-timing-function:cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--pallene:hover{color:#fff;border-radius:50%;box-shadow:inset 0 0 0 40px #495157;transition-delay:0s,0s,.2s}.bdt-ep-creative-button--telesto{overflow:hidden;font-weight:800;font-style:italic;font-size:1.15rem;color:#fff}.bdt-ep-creative-button--telesto span{display:block;position:relative;z-index:1}.bdt-ep-creative-button--telesto>span{overflow:hidden}.bdt-ep-creative-button--telesto:hover>span>span{animation:MoveRightInitial .1s forwards,MoveRightEnd .3s forwards .2s}@keyframes MoveRightInitial{to{transform:translate3d(-105%, 0, 0)}}@keyframes MoveRightEnd{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}.bdt-ep-creative-button--telesto::before,.bdt-ep-creative-button--telesto::after{content:'';background:#495157}.bdt-ep-creative-button--telesto::before{width:135%;-webkit-clip-path:polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 0 0);clip-path:polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 0 0);transform:translate3d(100%, 0, 0)}.bdt-ep-creative-button--telesto:hover::before{transform:translate3d(0, 0, 0);transition:transform .3s cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--telesto::after{width:105%;transform:translate3d(-100%, 0, 0);transition:transform .3s cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--telesto:hover::after{transform:translate3d(0, 0, 0);transition:transform .01s .3s cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--calypso{overflow:hidden;font-size:1.15rem;border-radius:.85rem;color:#fff}.bdt-ep-creative-button--calypso:hover{background:none !important}.bdt-ep-creative-button--calypso span{display:block;position:relative;z-index:10}.bdt-ep-creative-button--calypso:hover span{animation:MoveScaleUpInitial .3s forwards,MoveScaleUpEnd .3s forwards .3s}@keyframes MoveScaleUpInitial{to{transform:translate3d(0, -105%, 0) scale3d(1, 2, 1);opacity:0}}@keyframes MoveScaleUpEnd{from{transform:translate3d(0, 100%, 0) scale3d(1, 2, 1);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}.bdt-ep-creative-button--calypso::before{content:'';background:#798184;width:120%;height:0;padding-bottom:120%;top:-110%;right:-10%;border-radius:50%;transform:translate3d(0, 68%, 0) scale3d(0, 0, 0)}.bdt-ep-creative-button--calypso:hover::before{transform:translate3d(0, 0, 0) scale3d(1, 1, 1);transition:transform .4s cubic-bezier(.1, 0, .3, 1)}.bdt-ep-creative-button--calypso::after{content:'';background:#798184;transform:translate3d(0, -101%, 0);transition:transform .4s cubic-bezier(.1, 0, .3, 1)}.bdt-ep-creative-button--calypso:hover::after{transform:translate3d(0, 0, 0);transition-duration:.05s;transition-delay:.4s;transition-timing-function:linear}.bdt-ep-creative-button--skoll{overflow:hidden;border-radius:50%;color:#fff;width:100px;height:100px;padding:0;font-weight:500}.bdt-ep-creative-button--skoll span{display:block;position:relative}.bdt-ep-creative-button--skoll>span{overflow:hidden}.bdt-ep-creative-button--skoll:hover>span>span{animation:MoveUpInitial .2s forwards,MoveUpEnd .2s forwards .2s}.bdt-ep-creative-button--skoll::before{content:'';background:#495157;width:100%;height:0;padding-bottom:100%;border-radius:50%;transform:translate3d(0, 0, 0);transition:transform .3s;transition-timing-function:cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--skoll:hover::before{transform:translate3d(0, 100%, 0)}.bdt-ep-creative-button--greip{overflow:hidden;color:#fff;font-weight:500;padding:1rem 2rem}.bdt-ep-creative-button--greip span{display:block;position:relative}.bdt-ep-creative-button--greip>span{overflow:hidden}.bdt-ep-creative-button--greip:hover>span>span{animation:MoveUpInitial .2s forwards,MoveUpEnd .2s forwards .2s}.bdt-ep-creative-button--greip::before{content:'';background:#495157;width:100%;height:100%;transform-origin:50% 100%;-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);transition:clip-path .2s,-webkit-clip-path .2s;transition-timing-function:cubic-bezier(.7, 0, .2, 1)}.bdt-ep-creative-button--greip:hover::before{transition-duration:.3s;-webkit-clip-path:polygon(0 0, 100% 0, 0 0, 0 100%);clip-path:polygon(0 0, 100% 0, 0 0, 0 100%)}.bdt-ep-creative-button--dione{background:none !important;font-weight:500;font-style:italic;padding:1.5rem 3rem}.bdt-ep-creative-button--dione span{display:inline-block;position:relative;color:#fff}.bdt-ep-creative-button--dione::before{content:'';background:#798184;transition:transform .3s cubic-bezier(.2, 1, .7, 1)}.bdt-ep-creative-button--dione:hover::before{transform:scale3d(.9, .8, 1)}.bdt-ep-creative-button--dione::after{content:'';border:1px solid #798184;transition:transform .3s cubic-bezier(.2, 1, .7, 1);border-radius:0;transform:scale3d(.85, .65, 1)}.bdt-ep-creative-button--dione:hover::after{transform:scale3d(1, 1, 1)}.bdt-ep-creative-button--helene{border-radius:7px;border:1px solid #798184;font-weight:900;font-style:normal;text-transform:uppercase;font-size:.85rem;padding:1.5rem 3rem}.bdt-ep-creative-button--helene::before{content:'';top:10px;right:10px;width:calc(100% - 20px);height:calc(100% - 20px);background:rgba(0,0,0,0.5);filter:blur(7px);border-radius:7px;z-index:-1;transform:translate3d(0, 15px, 0);transition:transform .45s}.bdt-ep-creative-button--helene:hover::before{transform:translate3d(0, 0, 0)}.bdt-ep-creative-button--helene span{display:block}.bdt-ep-creative-button--helene>span{height:100%;overflow:hidden}.bdt-ep-creative-button--helene:hover>span>span{animation:slotMachine .15s ease-out forwards 3}@keyframes slotMachine{50%{transform:translate3d(0, 100%, 0);opacity:0}51%{transform:translate3d(0, -100%, 0);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}.bdt-ep-creative-button--rhea{font-weight:600;font-style:normal;width:180px;height:180px;color:#ffffff;background:none !important;font-size:15px;z-index:1}.bdt-ep-creative-button--rhea::before{content:'';z-index:-1;background:#798184;-webkit-clip-path:polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%);clip-path:polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%);transition:clip-path .4s cubic-bezier(.3, 1, .2, 1),-webkit-clip-path .4s cubic-bezier(.3, 1, .2, 1),transform .4s cubic-bezier(.3, 1, .2, 1),background .4s ease}.bdt-ep-creative-button--rhea:hover::before{background:#798184;transform:scale3d(.7, .7, 1);-webkit-clip-path:polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%);clip-path:polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%)}.bdt-ep-creative-button--rhea span{display:block;transition:transform .4s cubic-bezier(.3, 1, .2, 1),opacity .05s}.bdt-ep-creative-button--rhea:hover span{transform:scale3d(.1, .1, 1);opacity:0;transition-delay:0s,.35s}.bdt-ep-creative-button--narvi{font-weight:bold;background:none !important}.bdt-ep-creative-button--narvi::before{content:'';z-index:0;background:#798184;-webkit-clip-path:polygon(0 0, 100% 0, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);clip-path:polygon(0 0, 100% 0, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);transition:clip-path .3s cubic-bezier(.7, 0, .2, 1),-webkit-clip-path .3s cubic-bezier(.7, 0, .2, 1),transform .3s ease}.bdt-ep-creative-button--narvi:hover::before{transform:translate3d(0, -10px, 0);-webkit-clip-path:polygon(0 0, 100% 0, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%);clip-path:polygon(0 0, 100% 0, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%)}.bdt-ep-creative-button--narvi span{display:block;position:relative}.bdt-ep-creative-button--narvi>span{transition:transform .3s;transform:translate3d(0, -0.556rem, 0);z-index:1;overflow:hidden}.bdt-ep-creative-button--narvi:hover>span{transform:translate3d(0, -1.111rem, 0)}.bdt-ep-creative-button--narvi:hover>span>span{animation:MoveUpInitial .15s forwards,MoveUpEnd .15s forwards .15s}.bdt-ep-creative-button--hati{border-radius:50%;overflow:hidden;border:2px solid;background:none !important;color:#798184;font-weight:900;font-style:italic}.bdt-ep-creative-button--hati:hover{background:none !important}.bdt-ep-creative-button--hati::before{animation:rotateIt 10s linear infinite;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAUElEQVQoU3VPSQ4AMQiS/z/aBiMNNDNeXEBQoDL66dkG52/hzlmsSqMKrAVCoOXuxR3TFVSIIJmzsFvGOMlust3iivmQd/6+3/NlN4paIOEADPIUD/MQvy0AAAAASUVORK5CYII=);content:'';width:300%;height:300%;top:-100%;right:-100%;z-index:0;opacity:0;transform-origin:50% 50%;transition:opacity .3s}@keyframes rotateIt{to{transform:rotate(360deg)}}.bdt-ep-creative-button--hati:hover::before{opacity:.7}.bdt-ep-creative-button--hati span{display:block;position:relative;z-index:1}.bdt-ep-creative-button--bestia{font-size:1.15rem;color:#fff;background:none !important;padding:0 !important;border:0 !important;box-shadow:none !important}.bdt-ep-creative-button--bestia .bdt-ep-creative-button__bg{top:0;right:0;position:absolute;width:100%;height:100%;background:#798184;border-radius:.85rem;overflow:hidden;transition:transform .4s cubic-bezier(.1, 0, .3, 1)}.bdt-ep-creative-button--bestia:hover .bdt-ep-creative-button__bg{transform:scale3d(1.2, 1.2, 1)}.bdt-ep-creative-button--bestia .bdt-ep-creative-button__bg::before,.bdt-ep-creative-button--bestia .bdt-ep-creative-button__bg::after{content:'';position:absolute;background:#798184}.bdt-ep-creative-button--bestia .bdt-ep-creative-button__bg::before{width:110%;height:0;padding-bottom:110%;top:50%;right:50%;border-radius:50%;transform:translate3d(50%, -50%, 0) scale3d(0, 0, 1)}.bdt-ep-creative-button--bestia:hover .bdt-ep-creative-button__bg::before{transition:transform .4s cubic-bezier(.1, 0, .3, 1);transform:translate3d(50%, -50%, 0) scale3d(1, 1, 1)}.bdt-ep-creative-button--bestia .bdt-ep-creative-button__bg::after{top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity .3s}.bdt-ep-creative-button--bestia:hover .bdt-ep-creative-button__bg::after{opacity:1;transition-duration:.01s;transition-delay:.3s}.bdt-ep-creative-button--bestia span{display:block;position:relative;padding:1.5rem 3rem}.bdt-ep-creative-button--surtur{padding:0;background:none !important;-webkit-clip-path:circle(40% at 50% 50%);clip-path:circle(40% at 50% 50%)}.bdt-ep-creative-button--surtur:focus-visible{background:#443ffc}.bdt-ep-creative-button--surtur .textcircle{position:relative;display:block;width:200px}.bdt-ep-creative-button--surtur .textcircle *{fill:none !important}.bdt-ep-creative-button--surtur .textcircle text{font-size:32px;text-transform:uppercase;fill:#798184}.bdt-ep-creative-button--surtur .textcircle textPath{letter-spacing:17px}.bdt-ep-creative-button--surtur:hover .textcircle{animation:rotateIt 7s linear infinite}.bdt-ep-creative-button--surtur .eye{position:absolute;z-index:2;width:60px;height:60px;top:calc(50% - 30px);right:calc(50% - 30px)}.bdt-ep-creative-button--surtur .eye__outer,.bdt-ep-creative-button--surtur .eye__inner,.bdt-ep-creative-button--surtur .eye__lashes-up,.bdt-ep-creative-button--surtur .eye__lashes-down{stroke:#798184;fill:none;stroke-width:1.5px}.bdt-ep-creative-button--surtur .eye__lashes-down{opacity:0}.bdt-ep-creative-button--surtur:hover .eye__lashes-up,.bdt-ep-creative-button--surtur:hover .eye__inner,.bdt-ep-creative-button--surtur:hover .eye__iris{animation:blinkHide 2s step-end infinite}.bdt-ep-creative-button--surtur:hover .eye__lashes-down{animation:blinkShow 2s step-end infinite}@keyframes blinkHide{0%{opacity:0}10%{opacity:1}}@keyframes blinkShow{0%{opacity:1}10%{opacity:0}}.bdt-ep-creative-button--fenrir{background:none !important;padding:0;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);width:120px;height:120px;font-weight:600;text-transform:uppercase;font-size:12px;color:#798184}.bdt-ep-creative-button--fenrir .progress{position:absolute;width:80px;height:80px;top:calc(50% - 40px);right:calc(50% - 40px);transition:transform .4s cubic-bezier(.7, 0, .3, 1)}.bdt-ep-creative-button--fenrir:hover .progress{transform:scale3d(1.2, 1.2, 1)}.bdt-ep-creative-button--fenrir .progress__circle,.bdt-ep-creative-button--fenrir .progress__path{fill:none;stroke:#f0f0f0;stroke-width:1px}.bdt-ep-creative-button--fenrir:focus-visible .progress__circle{fill:rgba(252,196,63,0.4)}.bdt-ep-creative-button--fenrir .progress__path{stroke:#a6a6a6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.7, 0, .3, 1)}.bdt-ep-creative-button--fenrir:hover .progress__path{stroke-dashoffset:0}

MR SKB