.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-block;border:2px solid;position:relative;cursor:pointer;overflow:hidden;opacity:.6;color:#fff;font-size:30px}.button__text{display:block;padding:10px 15px;text-transform:uppercase;font-weight:700}.button__text:before{content:attr(title)}.button__text--bis{display:block;position:absolute;top:0;left:0;right:0;bottom:0;transform:translate(-1em);opacity:0}.button__mask{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;transform:translate(-100%) rotate(45deg);transition:all .3s}.button:hover{opacity:1}.button:hover .button__text{animation:fx-text .3s ease-out}.button:hover .button__text--bis{animation:fx-text-bis .3s ease-out}.button:hover .button__mask{animation:fx-mask .3s ease-out}.button:active{opacity:1;background:#fff;color:inherit}@keyframes fx-mask{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}@keyframes fx-text{0%{transform:translate(0);opacity:1}to{transform:translate(1em);opacity:0}}@keyframes fx-text-bis{0%{transform:translate(-1em);opacity:0}to{transform:translate(0);opacity:1}}