Kreasikan Tombol Back to Top dengan CSS

Melanjutkan postingan sebelumnya mengenai cara membuat tombol scroll to top, kali ini Xceria akan memberikan tutorial serupa tapi ini lebih kepada desain tombolnya. Jika pada tulisan sebelumnya ada 6 jenis tombol, pada tulisan ini Xceria akan memberikan satu image saja tapi bisa dikreasikan menjadi berbagai bentuk atau desain untuk digunakan sebagai tombol back to top.

Gambar yang Digunakan Sebagai Tombol

Berikut image atau gambarnya:

Gambar di atas adalah gambar tanda panah tanpa menggunakan background. Kita bisa membuat berbagai bentuk tombol hanya dengan menggunakan satu gambar ini. Lalu bagaimana caranya? Caranya cukup dengan mengubah style pada kode CSS-nya.

Contoh tombolnya seperti yang digunakan pada blog ini. Sedangkan untuk cara pemasangannya bisa melihat tulisan sebelumnya mengenai cara membuat tombol back to top.

Mengubah Desain Tombol Back to Top

Pertama yang perlu dilakukan adalah mengubah URL gambar tombol scroll to top. Karena Xceria menggunakan gambar tanda panah tadi, maka ubah image url-nya menjadi seperti di bawah ini.

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYEKjES9wdJqqsU-ApCcTS-wkqGTKXQMVW3kfONNDrqFHV_2fatHNW-_H-O4w-iVKtrhMzPokWFhEtukUToEzvv5PTp7Cm_RJ1XQXGT5J1NZEpgpR8MEtoIV6R1j6HlCLvnmC3YeR8FzP/s320/back_to_top_button.png'/>

Gambar tanda panah yang diberikan di atas berwarna putih. Jika ingin yang berwarna hitam, ganti dengan URL berikut.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_kJNDhz_Ky6pz-cbCnu_mmT5g2QcY01h3qK_rmC5HheD3OPkQ2fQL6AuNodRdtM5S3JElqHQXpC9jjtG4x1OTgj0uOlWJB51_jWcozYlNfmVoW_NRzFI-EV6JlVvFa1Mz1tR8QmJM2Es/s320/back_to_top_button_black.png
Untuk dapat membentuk tombol di atas dengan berbagai kreasi, kita akan menggunakan kode CSS. Di bawah ini ada beberapa perubahan model atau desain yang bisa Anda lakukan dengan CSS.

Untuk dapat menerapkannya, cari kode </b:skin> kemudian tambahkan kode CSS #ScrollToTop berikut di atasnya.

Menambahkan Background

Untuk dapat mengganti warna tombol, tidak perlu mengganti URL gambarnya. Tapi cukup dengan mengubah background.

#ScrollToTop img {background: blue;}

atau

#ScrollToTop img {background: #0000ff;}

Anda bisa mengubah warna background pada tulisan berwarna merah sesuai keinginan.

Mengubah Background Saat Hover

Dengan kode di bawah ini, warna background akan berubah pada saat mouse diarahkan ke tombol.

#ScrollToTop img {background: #0000ff;}
#ScrollToTop img:hover {background: #000000;}

Ubah kode warna pada tulisan berwarna merah sesuai keinginan.

Menambah Efek Transparan pada Background

Cara berikut sama dengan postingan sebelumnya.

#ScrollToTop img {filter: alpha(50); opacity: 0.50;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}

Ubah angka berwarna merah untuk mengatur transparansi tombol.

Mengubah Ukuran Tombol

Untuk mengubah ukuran tombol, cukup dengan menambahkan padding.

#ScrollToTop img {padding: 5px;}

Ubah angka 5px untuk mengubah ukuran tombol menjadi lebih besar atau lebih kecil.

Mengubah Kelengkungan Sudut Tombol

Tambahkan kode berikut untuk mengubah radius dari border tombol.

#ScrollToTop img {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

Anda juga bisa membuat tombol menjadi berbentuk bulat atau lingkaran dengan mengubah angka 3px menjadi lebih besar, misalnya 20px.

Dengan kode CSS di atas Anda bisa mengubah bentuk tombol sesuai kreasi sendiri. Di bawah ini ada 2 contoh tombol yang bisa Anda gunakan.

#ScrollToTop img {background: #0000ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

#ScrollToTop img {background: #202020; padding: 3px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px;}

Sekian tutorial kali ini mengenai tombol back to top. Semoga tulisan ini berguna.