22

✏️ Editing: ep-advanced-button.css

.bdt-ep-button{cursor:pointer;display:inline-block;text-transform:uppercase;outline:none;position:relative;transition:all .3s ease-out;z-index:0;text-align:center;overflow:hidden}.bdt-ep-button:hover{background-color:transparent;color:#fff}.bdt-ep-button:hover .bdt-ep-button-badge-inner{color:#000}.bdt-ep-button:hover svg{fill:#fff}.bdt-ep-button .bdt-ep-button-icon{position:relative;display:inline-flex;z-index:0}.bdt-ep-button .bdt-ep-button-icon .bdt-ep-button-a-icon-inner,.bdt-ep-button .bdt-ep-button-icon .bdt-ep-button-b-icon-inner,.bdt-ep-button .bdt-ep-button-icon .bdt-ep-button-icon-inner{display:inline-flex}.bdt-ep-button .bdt-ep-button-icon i,.bdt-ep-button .bdt-ep-button-icon svg{height:1em;width:1em;transition:all .3s ease-out}.bdt-ep-button .bdt-ep-button-text{position:relative;display:inline-block;z-index:0}.bdt-ep-button .bdt-ep-button-badge-inner{font-size:10px;background:#e4e4e8;padding:3px 6px;border-radius:3px;text-transform:uppercase;transition:all .3s ease}.bdt-ep-button .bdt-ep-button-content-wrapper{display:flex;align-items:center}.bdt-ep-button:after{content:'';position:absolute;z-index:-1;transition:all .3s ease-out;background:#666}.bdt-ep-button:active{color:#fff}.bdt-ep-button.bdt-ep-button-effect-a:after{width:100%;height:100%;top:0;left:0;opacity:0}.bdt-ep-button.bdt-ep-button-effect-a:hover:after,.bdt-ep-button.bdt-ep-button-effect-a:active:after{opacity:1}.bdt-ep-button.bdt-ep-button-effect-b:after{width:100%;height:0;top:0;left:0}.bdt-ep-button.bdt-ep-button-effect-b:hover:after{height:100%}.bdt-ep-button.bdt-ep-button-effect-b:active:after{height:100%}.bdt-ep-button.bdt-ep-button-effect-c:after{width:0;height:100%;top:0;left:0}.bdt-ep-button.bdt-ep-button-effect-c:hover:after{width:100%}.bdt-ep-button.bdt-ep-button-effect-c:active:after{width:100%}.bdt-ep-button.bdt-ep-button-effect-d{overflow:hidden}.bdt-ep-button.bdt-ep-button-effect-d:after{width:0;height:103%;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%)}.bdt-ep-button.bdt-ep-button-effect-d:hover:after{width:90%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-d:active:after{width:101%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-e{overflow:hidden}.bdt-ep-button.bdt-ep-button-effect-e:after{width:100%;height:0;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.bdt-ep-button.bdt-ep-button-effect-e:hover:after{height:260%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-e:active:after{height:400%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-f{overflow:hidden}.bdt-ep-button.bdt-ep-button-effect-f:after{width:101%;height:0;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%)}.bdt-ep-button.bdt-ep-button-effect-f:hover:after{height:75%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-f:active:after{height:130%;opacity:1}.bdt-ep-button.bdt-ep-button-effect-g{transition-timing-function:cubic-bezier(.31, 1.13, .64, .94)}.bdt-ep-button.bdt-ep-button-effect-g .bdt-ep-button-content-wrapper{position:relative}.bdt-ep-button.bdt-ep-button-effect-g .bdt-ep-button-content-wrapper .bdt-ep-button-text{display:block;position:relative}.bdt-ep-button.bdt-ep-button-effect-g .bdt-ep-button-content-wrapper .avdbtn-text{display:block;transition:transform .5s,opacity .8s;transition-timing-function:cubic-bezier(.31, 1.13, .64, .94)}.bdt-ep-button.bdt-ep-button-effect-g .bdt-ep-button-content-wrapper .avdbtn-alt-text{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;transform:translate3d(0, 25%, 0);transition:transform .5s,opacity .8s;transition-timing-function:cubic-bezier(.31, 1.13, .64, .94)}.bdt-ep-button.bdt-ep-button-effect-g:hover{background-color:transparent;color:#666}.bdt-ep-button.bdt-ep-button-effect-g:hover .avdbtn-alt-text{opacity:1;transform:translate3d(0, 0, 0)}.bdt-ep-button.bdt-ep-button-effect-g:hover .avdbtn-text{opacity:0;transform:translate3d(0, -25%, 0)}.bdt-ep-button.bdt-ep-button-effect-h{transition:color .3s;transition-timing-function:cubic-bezier(.2, 1, .3, 1)}.bdt-ep-button.bdt-ep-button-effect-h::after{content:'';position:absolute;top:0;left:0;width:150%;height:100%;background:#666;z-index:-1;transform:rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);transform-origin:0 100%;transition:transform .3s,opacity .3s,background-color .3s}.bdt-ep-button.bdt-ep-button-effect-h:hover::after{opacity:1;background-color:#666;transform:rotate3d(0, 0, 1, 0deg);transition-timing-function:cubic-bezier(.2, 1, .3, 1)}.bdt-ep-button.bdt-ep-button-effect-i{color:#fff;background:#666}.bdt-ep-button.bdt-ep-button-effect-i .bdt-ep-button-content-wrapper::before{content:'';position:absolute;width:100%;height:50%;left:0;background:#666;color:#fff;overflow:hidden;transition:transform .3s;transition-timing-function:cubic-bezier(.2, 1, .3, 1);top:0;padding-top:1em}.bdt-ep-button.bdt-ep-button-effect-i .bdt-ep-button-content-wrapper::after{content:'';position:absolute;width:100%;height:50%;left:0;background:#666;color:#fff;overflow:hidden;transition:transform .3s;transition-timing-function:cubic-bezier(.2, 1, .3, 1);bottom:0;line-height:0}.bdt-ep-button.bdt-ep-button-effect-i .bdt-ep-button-text{position:relative;z-index:1}.bdt-ep-button.bdt-ep-button-effect-i:hover{color:#666;background:#fff}.bdt-ep-button.bdt-ep-button-effect-i:hover .bdt-ep-button-content-wrapper::before{transform:translate3d(0, -100%, 0)}.bdt-ep-button.bdt-ep-button-effect-i:hover .bdt-ep-button-content-wrapper::after{transform:translate3d(0, 100%, 0)}

MR SKB