<div class="container"> <button disabled>The Button</button> <div class="slider"></div> <div class="frame">Transition</div> </div>
body { margin: 20px; background-color: #fff; } .container { position: relative; margin: 0 auto; width: 480px; height: 140px; background-color: #f5f5f5; border-radius: 4px; border: 1px solid #ddd; } button { position: absolute; padding: 10px 20px; top: 50px; left: 50px; border: none; border-radius: 4px; color: #fff; font: 16px sans-serif; /* set up background gradient and animation */ background-image: linear-gradient(#36d279, #1d854a); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } .container:hover button { /* shift background gradient position */ background-position: 0 0; cursor: pointer; } .slider { position: absolute; top: 50px; right: 50px; margin-top: -32px; width: 160px; height: 72px; background-image: linear-gradient(#36d279, #1d854a); transition: margin-top .5s; } .container:hover .slider { margin-top: 0px; } .frame { position: absolute; top: 50px; right: 50px; box-sizing: border-box; padding: 10px 0; border: solid 1px #ccc; border-radius: 4px; color: #fff; font: 16px sans-serif; width: 160px; text-align: center; }