October 17, 2020

Cara membuat CSS Button Keren dengan 6 Warna Tombol Berbeda

Hai semua, selamat datang kembali di masjoel.com. pada tutorial kali ini, saya ingin sharing bagaimana cara membuat tombol CSS / CSS Button yang keren di html dengan 6 tombol warna yang berbeda.

Yang disini saya dengan 6 tombol berbeda adalah kita akan membuat tombol dengan 6 warna yang berbeda. seperti gif yang berada di bawah ini.

cara-membuat-button-css-sendiri-keren
cara membuat button css sendiri keren

Perubahan antara tombol/button yang biasa (belum ada class) dengan yang sudah saya tambahkan class bisa dilihat di gambar di bawah ini.

gambar di kiri sudah ditambahkan dengan class “tombol” dan gambar di sisi kanan belum ditambahkan dengan class “tombol”

Oke, langsung saja, yang pertama kita akan buat file html nya terlebih dahulu, lalu isi dengan kode berikut ini.

<!DOCTYPE html>
<html lang="id">
<head>
	<title>CSS 6 Button</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="button_style.css">  <!-- MEMANGGIL STYLE DARI FILE CSS -->
</head>

<body>
	<button class="tombol">tombol default (masjoel.com)</button>
</body>
</html>

lalu kita buat lagi file bernama button_style.css dan disimpan didalam satu folder dengan file html tersebut (atau bisa juga disimpan ditempat lain dengan mengganti link untuk memanggil css tersebut). dibawah ini adalah kode css untuk file button_style.css

.tombol {
	height: 33px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	transition: 0.3s;
	opacity: 12;
	word-wrap: break-word;
	margin: 2px;
	padding: 0px 12px;
	border-radius: 4px;
	font-weight: 700;
}

Nah, dari style tersebut, kita telah membuat sebuah class bernama .tombol yang lalu class tersebut kita gunakan di style button. Dan hasilnya akan seperti gambar dibawah ini. (button/tombol yang dilingkari)

Perhatikan, di kode html, disitu terdapat kode yang berisi seperti ini.

<button class="tombol">tombol default</button>

terdapat class berisi tombol, yang dimana class tersebut berada di file button_style.css yang telah kita buat tadi.

Lalu disini kita akan membuat 5 tombol dengan warna yang berbeda tersebut, pertama kita akan tambahkan class di file button_style.css. adapun kodenya seperti dibawah ini.

.default{
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 blue;
}
.hijau{
	background-color: #1AFF53;
	text-decoration: none;
}
.biru{
	background-color: #52d4ff;
	text-decoration: none;
}
.merah{
	background-color: #F25050;
	color: white;
	text-decoration: none;
}
.orange{
	background-color: #FFE642;
	text-decoration: none;
}

Dari kode diatas, kita bisa melihat bahwa kita baru saja membuat 5 class baru di file css kita, yang mana class tersebut adalah 5 warna yang berbeda.

selanjutnya kita berpindah ke file html kita, lalu kita masukkan class tersebut di button-nya, disini saya akan membuat 5 button lagi, bisa dilihat di kode html dibawah ini.

<button class="tombol">tombol</button>
<button class="tombol default">tombol default</button>
<button class="tombol biru">tombol biru</button>
<button class="tombol orange">tombol orange</button>
<button class="tombol hijau">tombol hijau</button>
<button class="tombol merah">tombol merah</button>

Perlu kita perhatikan, disitu kita menambahkan 5 button baru, yang mana di setiap tombol terdapat dua class, yang pertama adalah class tombol, yang kedua adalah class warna yang kita buat, yaitu default, biru, orange, hijau, dan merah. maka hasilnya akan menjadi seperti gambar dibawah ini.

oke, sampai sini kita telah berhasil membuat 6 tombol dengan variasi yang berbeda. Tapi hanya saja ketika tombol tersebut mendapatkan hover / mouse berada di posisi button tersebut, tidak nampak perbedaan warna atau hanya warna itu saja. seperti dibawah ini.

maka kita akan membuat sebuah class yang berisi :hover, mari kita buka file button_style.css kita dan tambahkan kode berikut dibawahnya.

.tombol:hover{
	background-color: #e3e3e3;
}

.merah:hover{
	background-color: #D74242;
	transition: 0.3s;
}

.biru:hover{
	background-color: #68B0D4;
	transition: 0.3s;
}

.hijau:hover{
	background-color: #5AC658;
	transition: 0.3s;
}

.orange:hover{
	background-color: #D69D00;
	transition: 0.3s;
}

.secondary:hover{
	background-color: #949494;
	transition: 0.3s;
}

sehingga kode keseluruhan dari hasil yang kita buat sudah ada dibawah ini.
->Ini adalah kode html nya.

<!DOCTYPE html>
<html lang="id">
<head>
	<title>CSS 6 Button</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="button_style.css">  <!-- MEMANGGIL STYLE DARI FILE CSS -->
</head>

<body>
	<button class="tombol">tombol</button>
	<button class="tombol default">tombol default</button>
	<button class="tombol biru">tombol biru</button>
	<button class="tombol orange">tombol orange</button>
	<button class="tombol hijau">tombol hijau</button>
	<button class="tombol merah">tombol merah</button>
	
</body>
</html>

->Dan ini adalah kode css nya, yang bernama button_style.css.

.tombol {
	height: 33px;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	transition: 0.3s;
	opacity: 12;
	word-wrap: break-word;
	margin: 2px;
	padding: 0px 12px;
	border-radius: 4px;
	font-weight: 700;
}

.default{
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 blue;
}



.hijau{
	background-color: #1AFF53;
	text-decoration: none;
}

.biru{
	background-color: #52d4ff;
	text-decoration: none;
}

.merah{
	background-color: #F25050;
	color: white;
	text-decoration: none;
}

.orange{
	background-color: #FFE642;
	text-decoration: none;

}


.tombol:hover{
	background-color: #e3e3e3;
}

.merah:hover{
	background-color: #D74242;
	transition: 0.3s;
}

.biru:hover{
	background-color: #68B0D4;
	transition: 0.3s;
}

.hijau:hover{
	background-color: #5AC658;
	transition: 0.3s;
}

.orange:hover{
	background-color: #D69D00;
	transition: 0.3s;
}

.secondary:hover{
	background-color: #949494;
	transition: 0.3s;
}

sehingga hasil akhir dari style button tersebut adalah seperti gambar di bawah ini. yaitu setiap button ketika ada mouse maka akan berubah warna menjadi sedikit gelap

setiap button yang di hover oleh mouse akan terlihat warnanya lebih gelap dari sebelumnya.

oh ya, untuk mengganti teks nya adalah dengan mengganti teks yang berada di dalam kode ini <button class=”tombol biru”>isi tulisan disini</button>

itu dia, bagaimana cara membuat style css untuk button, sampai jumpa lagi di artikel selanjutnya, semoga bermanfaat.

tags:
-css
-css button
-Tutorial css
-Tutorial css Button
-cara membuat style css button sendiri
-cara membuat css button keren sendiri
-cara membuat css button sendiri

Leave a Reply

Your email address will not be published. Required fields are marked *

ten − 6 =