Begini Cara Sangat Simple, Sederhana dan Mudah Membuat CSS Tombol Yang Sangat Keren

Cakfadil    April 05, 2019    Blogger , Tips    Comment   

Kali ini Admin akan membagikan Cara Sangat Simple, Sederhana dan Mudah Membuat CSS Tombol Yang Sangat Keren. Dengan adanya berbagai variasi warna pada tombol yang kalian tampilkan di halaman blog maupun website kalian, menjadikan suatu alasan untuk menarik perhatikan pengunjung untuk nyaman berada di blog maupun website kalian. Maka kalian perlu sedikit memoles code style yang berada pada script style di edit html template kalian. Bagaimana caranya? simak langkah-langkah berikut ini.

1. Login blogger kalian.
2. Buka edit html pada template kalian.
3. Copas (copy - paste) code di bawah ini tepat di atas code </head> pada edit html. Note: untuk mempercepat pencarian, gunakan fungsi CTRL+F pada keyboard kalian dan ketikan </head> lalu enter.

<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</style>

• background-color Merupakan warna background dari tombol, silahkan ganti dan sesuaikan dengan keinginan kalian.
• border merupakan warna dari outline dari tombol atau warna tepi dari tombol, sesuaikan dengan keinginan kalian.
• color merupakan warna dari text yang ada pada tombol, silahkan ganti dan sesuaikan dengan keinginan kalian.
• padding merupakan ukuran spasi antara text dengan tombol, sesuaikan dengan keinginan kalian.
• text-align merupakan tata letak dari tombol berada, sesuaikan dengan keinginan kalian.
• text-decoration merupakan warna dengan nuansa dekorasi, sesuaikan dengan keinginan kalian.
• display merupakan property untuk mengubah ukuran tombol, biarkan begitu saja.
• font-size merupakan ukuran besar kecilnya font pada text didalam tombol, sesuaikan dengan keinginan kalian.
• margin merupakan ukuran spasi antara tombol dengan data body, sesuaikan dengan keinginan kalian.
• cursor merupakan suatu property yang dimana jika cursor diarahkan ke tombol, cursor akan berubah pointer.

Silahkan cek DEMO di bawah ini untuk code CSS diatas.

Html	Button
<button class="button">Hijau</button>
<button class="button button2">Biru</button>
<button class="button button3">Merah</button>
<button class="button button4">Abu-abu</button>
<button class="button button5">Hitam</button>

Semoga Tips di atas bermanfaat bagi kalian dan semoga kalian sukses banyak rejekinya, AMIN. Terima kasih atas Apresiasinya.
Pencarian Terkait:...

• Begini Cara Sangat Simple, Sederhana dan Mudah Membuat CSS Tombol Yang Sangat Keren
• Membuat Design Tombol Bergaya Flat Dengan CSS
• Bootstrap Part 4 : Membuat Tombol Dengan Bootstrap
• Cara Membuat Menu CSS Dropdown Sederhana
• Cara Membuat Website Sampai Tuntas (Tutorial Buat Pemula 2019)
• Cara Mendesain Blog Agar Keren dan Menarik
• Cara Membuat Sitemap SEO Keren di Blogspot
• CARA MEMBUAT WEBSITE UNTUK PEMULA TERLENGKAP
• Cara Membuat Form Login Dengan PHP MySQL

BACA SELENGKAPNYA