hover時にゆっくり変化させる

Button

a {
    background-color: #008FDE;
    padding:20px;

    transition: 0.5s; /* マウスカーソルを外すとき */
}

a:hover {
    opacity: 0.5;
    transition: 0.5s; /* マウスカーソルを載せるとき */
}