Seperti yang telah kita ketahui bersama bahwa sebuah tombol/hyperlink memiliki tampilan standar (biasanya berwarna biru dengan garis biru dibawahnya/underscore). Dan ketika mouse anda melintas diatas tombol tersebut biasanya tidak berubah warna dan atau langsung berganti warna secara cepat tanpa transisi sama sekali.

Dalam CSS sebenarnya kita dapat menambahkan beberapa kode agar tampilan yang dihasilkan lebih halus dengan beberapa baris perintah yang akan mengatur tampilan saat mouse/kursor melintas diatas tombol tersebut.

Anda cukup menambahkan kode seperti di bawah ini pada file CSS anda untuk membuat warna tombol menjadi lebih halus saat kursor melintas :

a { color:red; background:blue; }
a:hover { color:white; background:red; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-bottom:2px solid #8dc641; color:#8dc641; border-bottom:2px solid #8dc641;}


Catatan :
Anda dapat mengganti warna teks tombol anda dengan mengubah properti color dan warna latar pada property background.

Selamat mencoba