Membuat Tombol Button Pada Postingan Blog

UPDATE! Tambahan membuat tombol submit dengan efek CSS.

Saya belajar untuk memodifikasi sebuah tombol button pada setiap artikel begitu banyak cara dan model dengan keinginan yang disukai namun saya lebih senang dengan hasil sendiri meski begitu banyak cara agar terlihat sempurna dan butuh waktu lumayan panjang dengan hanya sebaris kode-kode yang memantau diri membuat saya bingung karena tidak memiliki background seorang programmer tapi saya senang dengan dunia programming dan coding ini.

Sedikitnya saya bagikan sebuah tampilan model button dengan beberapa tambahan variasi dari beberapa code.

1. Model Kesatu (Tanpa Efek Apapun)

Kodenya :

<button style="background-color: #444444; color: white; font-size: medium; padding: 10px;"><i class="fa fa-eye fa-lg"></i>  DEMO BUTTON </button></a>

2. Model Kedua (Single Link)

Kodenya :

<a href="https://yuktebarilmu.blogspot.co.id/p/hubungi.html"><button style="background-color: #444444; color: white; font-size: medium; padding: 10px;"><i class="fa fa-eye fa-lg"></i>  DEMO BUTTON</button></a>

3. Model Ketiga (New Tab)

Kodenya :

<a href="https://yuktebarilmu.blogspot.co.id/p/hubungi.html" target="_blank"><button style="background-color: #444444; color: white; font-size: medium; padding: 10px;"><i class="fa fa-eye fa-lg"></i>  DEMO BUTTON </button></a>

Anda bisa mengubah beberapa bagian untuk keperluan anda  pada bagian yang saya kasih tanda block

UPDATE! 
Saya tambahkan membuat tombol submit atau button dengan efek CSS. Dan ikuti langkah-langkahnya sebagai berikut :
Pertama anda masukan kode dibawah ini simpan tepat diatas </body>

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*--------------------------------Button starts--------------------------------*/
.button-container {
  text-align: center;
}
.button {
  position: relative;
  background: currentColor;
  border: 1px solid currentColor;
  font-size: 1.1rem;
  color: #D81900;
  margin: 3rem 0;
  padding: 0.75rem 3rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #D81900;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}
/*--------------------------------Button ends--------------------------------*/
</style>

Anda bisa mengedit warnanya sesuai yang anda mau atau selera. Kreasikan imajinasimu. Sebenarnya ini adalah kode CSS namun karena dibungkus oleh <style> maka sebaiknya disimpan dibawah kode </body> karena saya sudah mencoba menyimpan diatas ]]></b:skin> dan hasilnya gagal.

Lalu untuk anda menggunakan tombolnya di artikel anda. Anda hanya cukup masukan kode diabawah ini lalu anda edit sesuai kebutuhan anda sendiri ya.

<div class="container">
    <div class="button-container">
    <button type="submit" class="button"><span>Submit</span></button>
  </div> 
</div>

Untuk contoh sederhananya anda lihat hasilnya.

Bagaimana begitu mudah bukan kalo sudah jadi, hehe.
Silahkan gunakan untuk keperluan anda yah.
Salam Blogger :)

Terima kasih anda telah membaca artikel Membuat Tombol Button Pada Postingan Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: