Membuat Tombol keren pada Blog dengan CSS

Membuat variasi tombol keren pada Blog dengan CSS

Setelah beberapa waktu lalu memposting tutorial Cara membuat tombol keyboard pada postingan blog dan Cara membuat tombol Download pada Blog.Kali ini saya akan membagikan tutorial membuat tombol keren untuk blog dengan kode CSS. Tombol-tombol ini bisa di terapkan dan sangat cocok untuk blog yang membahas tentang Tutorial maupun Blog Download.

#1. Tombol Peringatan / Alert Button

Untuk membuat Alert Button, caranya:

Simpan kode ini di atas kode ]]></b:skin>

.btn {
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 14px 28px; /* Add some padding */
  cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}

Penerapan pada Postingan Artikel:

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button> 

#2. Tombol Garis / Outline Button

Untuk membuat Tombol Garis / Outline Button, caranya:
Simpan kode ini di atas kode ]]></b:skin>

/* Outline Button */
.btn-outline {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 12px 26px;
  font-size: 16px;
  cursor: pointer;
}
/* Green */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Blue */
.info {
  border-color: #2196F3;
  color: dodgerblue
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.danger {
  border-color: #f44336;
  color: red
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}

Untuk menerapkan di postingan atau Artikel, caranya:

<button class="btn-outline success">Success</button> <button class="btn-outline info">Info</button> <button class="btn-outline warning">Warning</button> <button class="btn-outline danger">Danger</button> <button class="btn-outline default">Default</button> 

#3. Tombol Download

Contoh Tombol Download

Untuk membuat tombol Download seperti ini silahkan ikuti Tutorial Disini.

Tombol Download dengan lebar otomatis:

<button class="btn"><i class="fa fa-download"></i> Download</button>

Tombol Download dengan lebar full:

<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

#4. Icon Button

Menambahkan Font Awesome pada Button.

<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>

Menambahkan Kata pada Icon Button.

<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

Membuat tombol seperti ini memerlukan pemasangan Font Awesome. Untuk lebih jelasnya, bisa baca disini. Mudah sekali memasang Font Awesome pada Blog.