Cara Membuat Tombol Dengan Animasi Shadow di Blogger

Ini adalah gantinya post Cara Membuat Tombol Warna-Warni kemarin yang barusan kehapus oleh Nisha tanpa sengaja. Hadeuhh.. 😥 Maklum lah, dia belum terlalu ngerti ngeblog, meskipun skill coding nya masih kurang, tapi dia mampu mencari jawaban kalau ada kode yang keliru.
Di artikel yang kehapus itu, Nisha memberikan tips untuk membuat tombol penuh dengan warna. Nah, saya cuma menambahkan sedikit animasi, effect shadow, dan round border. Untuk demo atau contoh, kunjungi http://blolearn-project.blogspot.co.id, lalu hover (arahkan pointer mouse) ke tombol Read more. Kalau kamu mau, baca penjelasan dibawah ini!

Membuat Style / CSS

Untuk kode CSS nya masih sama seperti di artikel yang terhapus tersebut, hanya menambahkan beberapa elemen saja. Dibawah ini adalah kode CSS yang diberikan oleh Nisha;

CSS Button

.green {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
}

Gak perlu ada yang harus diubah, hanya menambahkan elemen saja. Dan kode effect shadow, dkk. yang saya tambahkan seperti ini;

CSS Shadow Effect

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Untuk animasinya seperti ini;

CSS Rotating Effect

.green:hover{
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
  zoom: 1;
}

Cara menerapkan tombol

Untuk membuatnya menggunakan kode HTML button seperti biasa yaitu <button>Text Button</button>. Kamu hanya perlu menambahkan class setelah tag pembuka button. Contoh: <button class='green'>Teks Button</button>.
Tapi, jangan lupa! ketik kodenya di HTML Editor ya!

Menambahkan lebih banyak warna

Kamu bisa menambahkan jenis warna tombol sebanyak yang kamu mau, yang penting kamu harus membuat class untuk masing-masing warna. Agar lebih mudah diingat, buatlah class dengan nama warna yang akan dibuat. Contoh, saya membuat 3 warna dengan efek yang sama.

Contoh Full

.green {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.green:hover{
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
  zoom: 1;
}
.blue {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.blue:hover{
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
  zoom: 1;
}
.red {
  background-color: #f44336;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.red:hover{
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
  zoom: 1;
}

Penerapan langsung di template

Untuk penerapan langsung pada template, kamu bisa menempatkannya diatas kode ]]></b:skin> atau </style> (sebaiknya letakkan diatas ]]></b:skin> kalau template kamu memiliki tag penutup style lebih dari satu, supaya gak ribet).
Caranya:
Masuk ke Blogger dan pilih blog yang ingin kamu edit > Template > Edit HTML > Cari kode ]]></b:skin> menggunakan kombinasi tombol keyboard CTRL+F (Windows)

KETERANGAN

Perhatikan tabel berikut jika kamu ingin mengubah elemen yang ada di kode CSS diatas.

Kode	Keterangan
.green	Ubah dengan nama class sesuai keinginan (harus diawali dengan titik ".")
background-color	Ubah dengan kode warna sesuai keinginan (diawali dengan tanda pagar "#"). Kode warna lengkap klik disini.
border	Ganti none dengan besaran pixel yang diinginkan, misal 1px. Tambahkan style border dan kode warna, contoh 1px solid #666666
color	Ini digunakan untuk warna teks dalam tombol. Ganti black jika warna background tombol menggunakan warna cerah atau gunakan kode warna gelap lain.
padding	Ubah value untuk menyesuaikan jarak text
text-align	Ganti ke left jika ingin teks dalam tombol rata kiri, center untuk rata tengah dan right untuk rata kanan
text-decoration	Digunakan untuk menghapus underline (garis bawah) saat tombol disematkan link.
display	Ganti mode display sesuai keinginan, misal hanya block. Lebih baik gunakan inline-block agar tombol bisa berjejer dengan teks body.
font-size	Atur ukuran huruf teks dalam tombol sesuai keinginan
margin	Atur jarak margin antara tombol dan konten luar.
cursor	Untuk menampilkan efek saat hover
shadow	Isi value untuk ketebalan efek shadow. Silahkan bereksperimen sendiri untuk ini. Note: rgba (0,0,0,5) adalah kode warna. Untuk mengetahui kode warna ini lihat disini.
radius	Ini berfungsi untuk membuat efek bulat pada tombol, semakin besar value maka semakin bulat. Untuk lebih mudah, gunakan border-radius:**px;, ganti ** dengan angka. Sesuaikan dengan keinginan.
hover	Ini digunakan untuk membuat efek saat hover ke tombol. Value 0.5sec durasi waktu efek untuk bekerja. Jangan set terlalu lama. 7deg (tujuh derajat) adalah value untuk efek rotate / putar, tombol akan sedikit miring saat dihover.

Sekian... Selamat berjuang kawan! 😉