Xceria Blogger Indonesia

Kreasikan Tombol Back to Top dengan CSS

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 7 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://1.bp.blogspot.com/-_ADzKH2Hh1c/VzanijyEYGI/AAAAAAAAExQ/7Y2zLdOn-nYhHW99R6owl30EtC7vWJPCACLcB/s1600/back-to-top-arrow-white.png'/>

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


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 {border-radius: 3px;}

Anda juga bisa membuat tombol menjadi berbentuk bulat atau lingkaran dengan mengubah angka 3px menjadi 50%.

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; border-radius: 3px;}


#ScrollToTop img {background: #202020; padding: 3px; border-radius: 50%;}

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

22 comments

bingung gan caranya,, heheheheh

balas

wah, lanjutan dari navigasi scroll keatas kemarin yah

keren juga nih, bisa di costumize

balas

iya, jadi mudah ngedit tombolnya :d

balas

Bagus juga sebenarnya masang tombol back to top ini, tetapi pengguna awang biasanya masih menggunakan kursor secara manual karena belum mengetahui tentang fungsi ini. Jadi aku nyimak aja dulu

balas

Blog dan artikelnya menarik sekali untuk disimak, sayang banget jika sampai terlewatkan...

balas

Silahkan dicoba tombol back to top di atas :D

balas

kreasinya keren sobat, akan saya coba nih.

thanks atas artikelnya.

balas

keren banget dan berguna bagi blogger papua yang baru mengenal blog kaya gini

balas

Terimakasih gan tips kerennya, btw bisa dipasang di WordPress ga?

balas

terima kasih.. boleh nih di coba di blog ane :)

balas

Boleh juga nih diterapin d blog ane...

balas

Wah sangat bermanfaat juga nih gan
http://kumpullinfo.blogspot.com

balas

wih bisa belajar css dengan hal sederhana nih... hehe thanks

balas

bagus nih triknya, perlu di coba pada blog ku, makasih ya udah share.

balas

hehe ane sudah sering gan bermain CSS jadi kalau masalah customize sih gampang =D

balas

ane coba dulu gan,,kayaknya mudah...

balas

Wah terima kasih nih gan diulas secara lengkap dan saya lebih suka warna yang biru :v

balas

bingung kak liat gituan, tapi bisa dipakai di website gak?

balas

wah mantap nih gan tutorialnya , izin yah pasang di blog ane

balas

Nice articel, terus berbagi ilmu ya

balas

cara yang mudah bisa sy coba untuk mengubah tampilan tombol back to top sy

balas
:) :( ;) :D =D :w :c :d -) -| :v =( ^: :o :C :-

Silahkan berkomentar sesuai dengan artikel. Dilarang berkomentar spam dan menulis iklan!

« »
 
Back to top