@import url("https://fonts.googleapis.com/css?family=Roboto:900,900i"); body { background:#F7EBFE; width:100%; height:90vh; display:flex; justify-content:center; align-items:center; font-family:Roboto; font-style:italic; } .button { position:relative; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); cursor:pointer; padding:15px 35px; background:#9725F3; border-radius:50px; font-size:35px; text-transform:uppercase; letter-spacing:2px; color:#F3F137; } .button-text { position:relative; } .button-rainbow { width:150%; height:auto; top:10px; left:-25%; position:absolute; transition:1000ms transform cubic-bezier(0.25,0.46,0.45,0.94); transform:translateY(0) rotate(45deg); } .button:hover .button-rainbow { transform:translateY(-100%) rotate(45deg); }