*,*:before,*:after{box-sizing:border-box;outline:none}html{font-family:source sans pro,sans-serif;font-size:16px;font-smooth:auto;font-weight:300;line-height:1.5;color:#444}.hide{display:none}.button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:12.5rem;margin:0;padding:1.5rem 3.125rem;background-color:#5e35b1;border:none;border-radius:.3125rem;box-shadow:0 12px 24px rgba(0,0,0,.2);color:#fff;font-weight:300;text-transform:uppercase;overflow:hidden}.button:before{position:absolute;content:'';bottom:0;left:0;width:0%;height:100%;background-color:#54d98c}.button span{position:absolute;line-height:0}.button span i{transform-origin:center center}.button span:nth-of-type(1){top:50%;transform:translateY(-50%)}.button span:nth-of-type(2){top:100%;transform:translateY(0%);font-size:24px}.button span:nth-of-type(3){display:none}