* { margin:0; padding:0; } html,body { width:100%; height:100%; } button { outline:none; border:none; } @keyframes moveing { form { width:0px; opacity:1; } to { width:200px; opacity:0; } }.but { position:relative; width:200px; height:100px; background-color:blue; margin:0 auto; } .but span { width:0; height:100px; position:absolute; top:0; left:0; background-color:#fff; } .but:hover span { animation:moveing 0.8s; }