.dcl-button{position:relative;display:inline-block;margin:5px 10px;padding:15px 22px;z-index:1;border:0;outline:0;cursor:pointer;color:#fff;text-align:center;line-height:normal;letter-spacing:0.05em;text-transform:uppercase;font-weight:bold}.dcl-button .dcl-hover{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden}.dcl-button .dcl-hover span{position:relative;display:block;left:-15px;height:10px;width:0;content:''}.dcl-button .dcl-hover span:after{position:absolute;display:block;right:-10px;width:10px;height:10px;background:#fff;content:''}.dcl-button .dcl-hover span:nth-child(odd):after{background:rgba(0,0,0,0.35)}.dcl-button .dcl-hover span:first-child{left:-75px;transition:all 0.3s steps(8)}.dcl-button .dcl-hover span:nth-child(2){left:-45px;transition:all 0.325s steps(8)}.dcl-button .dcl-hover span:nth-child(3){left:-55px;transition:all 0.35s steps(8)}.dcl-button .dcl-hover span:nth-child(4){transition:all 0.4s steps(8)}.dcl-button .dcl-hover span:nth-child(5){left:-25px;transition:all 0.375s steps(8)}.dcl-button:after{position:absolute;right:0;bottom:0;left:0;height:4px;z-index:-2;content:''}.dcl-button:hover{color:#fff}.dcl-button:hover,.dcl-button:focus{color:#fff}.dcl-button:hover .dcl-hover span:first-child,.dcl-button:focus .dcl-hover span:first-child{width:calc(100% + 76px)}.dcl-button:hover .dcl-hover span:first-child:after,.dcl-button:focus .dcl-hover span:first-child:after{animation:whiteBlack 0.3s 0s 1}.dcl-button:hover .dcl-hover span:nth-child(2),.dcl-button:focus .dcl-hover span:nth-child(2){width:calc(100% + 46px);transition:all 0.375s steps(8)}.dcl-button:hover .dcl-hover span:nth-child(2):after,.dcl-button:focus .dcl-hover span:nth-child(2):after{animation:whiteBlack 0.3s 0.06s 1 reverse backwards}.dcl-button:hover .dcl-hover span:nth-child(3),.dcl-button:focus .dcl-hover span:nth-child(3){width:calc(100% + 56px);transition:all 0.35s steps(8)}.dcl-button:hover .dcl-hover span:nth-child(3):after,.dcl-button:focus .dcl-hover span:nth-child(3):after{animation:whiteBlack 0.3s 0.05s 1 forwards}.dcl-button:hover .dcl-hover span:nth-child(4),.dcl-button:focus .dcl-hover span:nth-child(4){width:calc(100% + 16px);transition:all 0.3s steps(8)}.dcl-button:hover .dcl-hover span:nth-child(4):after,.dcl-button:focus .dcl-hover span:nth-child(4):after{animation:whiteBlack 0.3s 0s 1 reverse backwards}.dcl-button:hover .dcl-hover span:nth-child(5),.dcl-button:focus .dcl-hover span:nth-child(5){width:calc(100% + 26px);transition:all 0.325s steps(8)}.dcl-button:hover .dcl-hover span:nth-child(5):after,.dcl-button:focus .dcl-hover span:nth-child(5):after{animation:whiteBlack 0.3s 0.07s 1 forwards}.dcl-button.dcl-red{background:#ff5747}.dcl-button.dcl-red span,.dcl-button.dcl-red:after{background:#cb4539}.dcl-button.dcl-green{background:#2bdc33}.dcl-button.dcl-green span,.dcl-button.dcl-green:after{background:#23b32a}.dcl-button.dcl-blue{background:#16bfff}.dcl-button.dcl-blue span,.dcl-button.dcl-blue:after{background:#129acd}.dcl-button.dcl-orange{background:coral}.dcl-button.dcl-orange span,.dcl-button.dcl-orange:after{background:tomato}.dcl-button.dcl-cyan{background:#16bfff}.dcl-button.dcl-cyan span,.dcl-button.dcl-cyan:after{background:#129acd}.dcl-button.dcl-black{background:#222a2c}.dcl-button.dcl-black span,.dcl-button.dcl-black:after{background:#000}.dcl-button.dcl-magenta{background:#f465ff}.dcl-button.dcl-magenta span,.dcl-button.dcl-magenta:after{background:#db04ff}@keyframes whiteBlack{0%,24%{background:#fff}25%,49%{background:rgba(0,0,0,0.35)}50%,74%{background:#fff}75%,100%{background:rgba(0,0,0,0.35)}}