MEMBUAT TOMBOL PADA POSTINGAN BLOG

Pada postingan saya kali ini,saya akan mencoba berbagi tips/atau cara membuat tombol pada postingan blog,tentunya menggunakan kode css dan html. .tombol css yang akan kita bahas cara membuatnya ini saya rasa sangat bagus untuk diaplikasikan pada postingan blog,kenapa begitu? yaa lebih jelasnya langsung lihat screenshot'nya dibawah ini saja sob. .hhe,daripada kelamaan ngejelasinya,dan langsung saja ke cara memasang pada blog kita. .

CARA MEMBUAT TOMBOL MENGGUNAKAN CSS PADA BLOG

Pertama masuk ke blogger dashboard kalian
Langsung ke tempelate dan edit HTML
Kemudian cari kode ]]></b:skin pada tempelate anda
Copy kode CSS di bawah ini
Dan pastekan tepat diatas ]]></b:skin

.button
{
  cursor:pointer;
  text-align:center;
  padding:20px;
  border:2px solid rgba(255,255,255,.8);
  background:grey;
  width:250px;
  border-radius:150px;
  color:white;
  font:normal 40px 'sans-serif';
  box-shadow:0 5px 3px #000;
  -moz-box-shadow:0 5px 3px #000;
  -webkit-box-shadow:0 5px 3px #000;
  -ms-box-shadow:0 5px 3px #000;
  -o-box-shadow:0 5px 3px #000;
  transition:300ms ease-in-out;
  -ms-transition:300ms ease-in-out;
  -moz-transition:300ms ease-in-out;
  -webkit-transition:300ms ease-in-out;
  -o-transition:300ms ease-in-out;
}
.button:hover
{
  box-shadow:0 10px 4px #000;
  -moz-box-shadow:0 10px 4px #000;
  -o-box-shadow:0 10px 4px #000;
  -ms-box-shadow:0 10px 4px #000;
  -webkit-box-shadow:0 10px 4px #000;
  transform:translateY(-5px);
  -ms-transform:translateY(-5px);
  -o-transform:translateY(-5px);
  -webkit-transform:translateY(-5px);
  -moz-transform:translateY(-5px);
}
.button:active
{
  box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -ms-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -o-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -moz-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -webkit-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  transform:translateY(10px);
  -ms-transform:translateY(10px);
  -o-transform:translateY(10px);
  -webkit-transform:translateY(10px);
  -moz-transform:translateY(10px);
}

Kalau kode CSS'nya sudah anda pasang pada tempelate,sekarang untuk cara menampilkan tombol di postingan gunakan kode HTML di bawah ini. . ! !

<div class="button">Live Demo</div>

KETERANGAN:

Yang berwarna biru ganti dengan link yang akan anda pasang dalam tombol
Dan yang berwarna merah silahkan ganti dengan Download,Demo,atau terserah anda
Jangan lupa pada saat akan memasukan kode HTML nya pada postingan klik HTML dulu jangan yang Compose. .

Nah begitulah sedikit cara membuat tombol untuk postingan blog menggunakan css,selamat mencoba dan bereksperimen. . Sekian saya rasa artikel ini sudah selesai,bila ada pertanyaan maupun saran,silahkan tanyakan lewat komen. .