22

✏️ Editing: ep-dual-button.css

.bdt-dual-button{display:flex;position:relative}.bdt-dual-button .bdt-ep-button{transition:all .25s ease-in-out;width:100%}.bdt-dual-button .bdt-ep-button svg{fill:#fff}.bdt-dual-button .bdt-btn-a{background-color:#818a91;color:#fff}.bdt-dual-button .bdt-btn-a:after,.bdt-dual-button .bdt-btn-a:before{background-color:#697279}.bdt-dual-button .bdt-btn-b{background:#1e87f0;color:#fff}.bdt-dual-button .bdt-btn-b:after,.bdt-dual-button .bdt-btn-b:before{background:#0f6ecd}.bdt-dual-button span{width:40px;height:40px;line-height:40px;border-radius:50%;z-index:1;position:relative;box-shadow:0 0 0 6px rgba(255,255,255,0.2);background:#FAFAF8;color:#444444;text-transform:uppercase;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;vertical-align:middle;font-weight:400;font-size:14px}.bdt-dual-button .bdt-ep-button-size-xs+span{width:20px;height:20px;line-height:20px;font-size:10px}.bdt-dual-button .bdt-ep-button-size-sm+span{width:29px;height:29px;line-height:29px;font-size:12px}.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 .bdt-btn-icon{position:relative;display:inline-flex;z-index:0}.bdt-ep-button .bdt-btn-icon .bdt-a-icon-inner,.bdt-ep-button .bdt-btn-icon .bdt-b-icon-inner,.bdt-ep-button .bdt-btn-icon .bdt-icon-inner{display:inline-flex}.bdt-ep-button .bdt-btn-icon i,.bdt-ep-button .bdt-btn-icon svg{width:1em;height:1em}.bdt-ep-button .bdt-btn-text{position:relative;display:inline-block;z-index:0}.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-effect-a:after{width:100%;height:100%;top:0;left:0;opacity:0}.bdt-ep-button.bdt-effect-a:hover:after,.bdt-ep-button.bdt-effect-a:active:after{opacity:1}.bdt-ep-button.bdt-effect-b:after{width:100%;height:0;top:0;left:0}.bdt-ep-button.bdt-effect-b:hover:after{height:100%}.bdt-ep-button.bdt-effect-b:active:after{height:100%}.bdt-ep-button.bdt-effect-c:after{width:0;height:100%;top:0;left:0}.bdt-ep-button.bdt-effect-c:hover:after{width:100%}.bdt-ep-button.bdt-effect-c:active:after{width:100%}.bdt-ep-button.bdt-effect-d{overflow:hidden}.bdt-ep-button.bdt-effect-d:after{width:0;height:103%;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%)}.bdt-ep-button.bdt-effect-d:hover:after{width:90%;opacity:1}.bdt-ep-button.bdt-effect-d:active:after{width:101%;opacity:1}.bdt-ep-button.bdt-effect-e{overflow:hidden}.bdt-ep-button.bdt-effect-e:after{width:100%;height:0;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.bdt-ep-button.bdt-effect-e:hover:after{height:260%;opacity:1}.bdt-ep-button.bdt-effect-e:active:after{height:400%;opacity:1}.bdt-ep-button.bdt-effect-f{overflow:hidden}.bdt-ep-button.bdt-effect-f:after{width:101%;height:0;top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%)}.bdt-ep-button.bdt-effect-f:hover:after{height:75%;opacity:1}.bdt-ep-button.bdt-effect-f:active:after{height:130%;opacity:1}.bdt-ep-button.bdt-effect-g{transition-timing-function:cubic-bezier(.31, 1.13, .64, .94)}.bdt-ep-button.bdt-effect-g .bdt-btn-content-wrap{position:relative}.bdt-ep-button.bdt-effect-g .bdt-btn-content-wrap .bdt-btn-text{display:block;position:relative}.bdt-ep-button.bdt-effect-g .bdt-btn-content-wrap .avdbtn-text{display:block;transition:transform .5s,opacity .8s;transition-timing-function:cubic-bezier(.31, 1.13, .64, .94)}.bdt-ep-button.bdt-effect-g .bdt-btn-content-wrap .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-effect-g:hover{background-color:transparent;color:#666}.bdt-ep-button.bdt-effect-g:hover .avdbtn-alt-text{opacity:1;transform:translate3d(0, 0, 0)}.bdt-ep-button.bdt-effect-g:hover .avdbtn-text{opacity:0;transform:translate3d(0, -25%, 0)}.bdt-ep-button.bdt-effect-h{transition:color .3s;transition-timing-function:cubic-bezier(.2, 1, .3, 1)}.bdt-ep-button.bdt-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-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-effect-i{color:#fff;background:#666}.bdt-ep-button.bdt-effect-i .bdt-btn-content-wrap::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-effect-i .bdt-btn-content-wrap::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-effect-i .bdt-btn-text{position:relative;z-index:1}.bdt-ep-button.bdt-effect-i:hover{color:#666;background:#fff}.bdt-ep-button.bdt-effect-i:hover .bdt-btn-content-wrap::before{transform:translate3d(0, -100%, 0)}.bdt-ep-button.bdt-effect-i:hover .bdt-btn-content-wrap::after{transform:translate3d(0, 100%, 0)}

MR SKB