Cara Membuat Tombol Demo Melayang dan Keren

Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.

Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.

Untuk demonya, nantinya seperti ini :

DEMO

DOWNLOAD

Berikut Cara Membuatnya :
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 class="custom1" id="box-melayang"><a href="$LINK">&nbsp;DEMO</a></div>
<div class="custom2" id="box-melayang"><a href="$LINK">&nbsp;DOWNLOAD</a></div>
<div class="custom3" id="box-melayang"><a href="$LINK">&nbsp;DEMO</a></div>
<div class="custom4" id="box-melayang"><a href="$LINK">&nbsp;DOWNLOAD</a></div> 

Selanjutnya tinggal Kalian Ganti aja tulisan $LINK dengan Link Kalian dan Warna2 yang Kalian Inginkan .... 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.

Bagikan Artikel ini