Cara Membuat Tombol Float Berwarna-warni Dengan CSS Sangat Mudah

Box float burron dibuat menggunakan beberapa CSS. Jadi Anda bisa menerapkan CSS fungsinya untuk elemen lain seperti tombol navigasi menu, tombol unduh, atau mungkin tombol back-to-top. Karena, pada dasarnya, kotak ini menggunakan CSS: hover dan: aktif untuk membuat efek seperti mengklik suatu elemen.

Lihat Demo Di Sini

Baiklah, mari kita mulai:

Buka  dasbor blogger dan pilih blog yang ingin Anda tambahkan tombol-tombol ini. 

Klik tag Edit HTML dan temukan ]]> </skin> .

Tepat di atas itu, tambahkan kode selanjutnya:

CSS:

body {
   background-color : #eee ;
  padding : 50px ;
  perataan teks : tengah;
}

# box-melayang {
   display : inline-block;
  posisi : relatif;
  background-color : putih;
  lebar : 70px ;
  tinggi : 40px ;
  margin : 0  5px ;
  -webkit-box-shadow : 0  10px  5px - 4px  rgba ( 0 , 0 , 0 ,. 2 );
  -moz-box-shadow : 0  10px  5px - 4px  rgba ( 0, 0 , 0 ,. 2 );
  box-shadow : 0  10px  5px - 4px  rgba ( 0 , 0 , 0 ,. 2 );
  -webkit-border-radius : 10px ;
  -moz-border-radius : 10px ;
  border-radius : 10px ;
  font : normal normal 20px / 40px  "helvetica" , Oswald, Arial, Sans-Serif;
  perataan teks : tengah;
  warna :# 888 ;
  kursor : default;
  lebar : otomatis;
  padding : 0px  8px ;
}

.custom {
   background : # 007AC3  ! important ;
  warna : #fff  ! penting ;
}

.custom1 {
   background : # 3853B1  ! important ;
  warna : #fff  ! penting ;
}

.custom2 {
   background : # DD3636  ! important ;
  warna : #fff  ! penting ;
}

.custom3 {
   background : # DD369A  ! important ;
  warna : #fff  ! penting ;
}

# box-melayang : hover {
   top : 5px ;
  -webkit-box-shadow : 0  2px  2px  rgba ( 0 , 0 , 0 ,. 2 );
  -moz-box-shadow : 0  2px  2px  rgba ( 0 , 0 , 0 ,. 2 );
  box-shadow : 0  2px  2px  rgba ( 0 , 0 , 0 ,. 2 );
}

# box-melayang : active {
   top : 6px ;
  -webkit-box-shadow : 0  1px  2px  rgba ( 0 , 0 , 0 ,. 2 );
  -moz-box-shadow : 0  1px  2px  rgba ( 0 , 0 , 0 ,. 2 );
  box-shadow : 0  1px  2px  rgba ( 0 , 0 , 0 ,. 2 );
}

Jangan lupa untuk membuat cadangan sementara. Juga, sebelum menyimpan Anda dapat melihat pratinjau blog Anda untuk melihat apakah semuanya baik-baik saja. Jika tidak, editor tidak akan menyimpan template Anda. 

Sekarang pergi ke Layout  → Add Widget / Gadget  → Pilih HTML dan Tempel kode berikutnya:

< div  id = "box-melayang"  class = "custom1" > Sukai kami </ div > 
< div  id = "box-melayang"  class = "custom2" > Bagikan + </ div > 
< div  id = "box-melayang "  class = " custom3 " > Menyukainya! </ div > 
< div  id = "box-melayang"  class = "custom"div >

Anda dapat menyesuaikannya dengan sangat mudah, seperti, ikuti saya, ubah warna (Anda dapat menemukan kode warna di  sini ) 
Itu saja. Saya harap ini bekerja dengan baik