-->

-


Membuat Box Melayang Warna Warni Dengan CSS - Sudah lama tidak posting, untuk permulaan lagi. Kita mulai dengan posting yang ringan saja OK. Jadi, beberapa minggu sudah terlewatkan. Tapi masih ada pengunjung disini. Terimakasih sudah berkunjung dan membaca artikel yang garing dan pasaran, dan juga mendownload template-template gak jelas dan plagiat disini.

Box melayang ini dibuat menggunakan beberapa CSS. Jadi kalian bisa menerapkan fungsi CSS-nya untuk di elemen lain seperti, tombol menu navigasi, tombol download, atau mungkin tombol back to-top. Karena pada dasarnya, box ini menggunakan CSS :hover dan :active untuk membuat efek seperti di click pada elemen.

Yah, langsung saja kita ke cara pembuatan. 

Cara Pembuatan Box Melayang

1. Masuk ke Blogger > Pilih menu Template > Klik tombol Edit HTML. Kemudian pastekan CSS ini di atas ]]></b:skin> atau </style>.
#box-melayang {
  display:inline-block;
  position:relative;
  background-color:white;
  width:70px;
  height:70px;
  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 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
  text-align:center;
  color:#888;
  cursor:default;
  width: auto;
  padding:0px 8px;
}

#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);
}
.custom{
  background:#007AC3 !important;
  color: #fff !important;
}
.custom1{
  background:#3853B1 !important;
  color: #fff !important;
}
.custom2{
  background:#DD3636 !important;
  color: #fff !important;
}
.custom3{
  background:#DD369A !important;
  color: #fff !important;
}

2. Pakai HTML dibawah ini, untuk memakai atau memunculkan Box Melayang nya. hehe

<div id="box-melayang" class="custom1">Like</div>
<div id="box-melayang" class="custom2">Share +</div>
<div id="box-melayang" class="custom3">Love it !</div>
<div id="box-melayang" class="custom">Fansublogger</div>

Bagaimana, gampang kan. Silakan dicoba. Dan bisa kalian kreasikan. Jika ingin membuat tombol lainnya memiliki efek seperti box melayang ini, kalian tinggal tambahkan css :hover dan :active lalu beri sedikit perbedaan css pada elemen tersebut. 

Sekian dulu postingan hari ini.

UNTUK DEMO NYA, SILAKAN LIHAT DI BAWAH INI!