.animate_background{ transition-property:background-color; /* see background-color here */ transition-duration:1s; } .animate_background:hover { background-color: #F6F5F1; color: #0079FF; } /*** following is just box styling ***/ .box { height: 50px; width: 200px; padding: 5px; border-radius:10px; margin: 10px; cursor:pointer; border:2px solid #0079FF; letter-spacing: -0.5; font: 20px/50px 'PT Sans', sans-serif; text-align: center; background-color: #0079FF; color:#fff; -webkit-box-shadow: 1px 1px 2px #aaa, 1px 1px 1px #6cf inset; box-shadow: 1px 1px 2px #aaa, 1px 1px 1px #6cf inset; }
<div class="box animate_background"> Background Demo </div>