concept creative design
creative design concept

Membuat Efek Transisi Pada Tombol dengan CSS

Oct 17, 2014 kategori Artikel

html-cssSeperti 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

Hubungi Rajadigital

  • Mobile : +62 8127 3631 780
  • WhatsApp : +62 8127 3631 780
  • BlackBerry Pin : 529FF963
  • Email : budi.skom@gmail.com
  • Ym : b0nk3y_worlds@yahoo.com
  • desaintcorp
  • @desainweb
  • Blackberry Pin
Kantor
BaturajaNiagara Hill Blok D No.3
Karang Sari, Baturaja
South Sumatera, Indonesia

MagelangJl. Sunan Ampel 1 No. 31
Magelang
Jawa Tengah, Indonesia

TangerangJl. MH. Thamrin No. 46
Kebon Nanas, Cikokol
Tangerang, Indonesia

Tim Rajadigital dapat juga ditemui di kota-kota besar di Indonesia termasuk Jakarta, Yogyakarta, dan Bandung. Hubungi kami sekarang untuk memulai!