Cara Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3.

Sering kita lihat icon-icon pembayaran di dalam website e-commerce, nah itu berfungsi untuk membayar barang yang kita beli. Kita bisa memilih jenis kartu apa yang akan kita genukan atau metode pembayaran apa yang akan kita gunakan.

Nah, Sekarang saya akan Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3 sebagai contoh saja. Berikut tutorial singkat tentang Cara Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3:

â€“ Pertama teman-teman download dulu font-awesome untuk mengambil icon yang kita akan pakai dan simpan satu folder dengan index.html.

â€“ Kedua teman-teman buka flat ui color di browser teman-teman:

Flat ui Color di gunakan unutk memberi warna background pada masing-masing icon.

â€“ Ketiga teman-teman buat struktur dasar HTML-nya dulu bawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Flat payment icon</title>
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class="container">
	<h1>Pilih salah satu untuk membayar tagihan:</h1>
	<br>
	<ul>
		<li class="peterriver"><a href=""><i class="fa fa-cc-mastercard" aria-hidden="true"></a></i></li>
		<li class="emerald"><a href=""><i class="fa fa-cc-paypal" aria-hidden="true"></i></a></li>
		<li class="alizarin"><a href=""><i class="fa fa-cc-stripe" aria-hidden="true"></i></a></li>
		<li class="orange"><a href=""><i class="fa fa-cc-visa" aria-hidden="true"></i></a></li>
	</ul>

</div>

</body>
</html>

Di index saya sudah memberikan link css dan link font awesomenya. Apabila teman-teman bua di browser maka tampilannya akan menjadi seperti ini:

â€“ Keempat teman-teman ketikan css-nya untuk mempercantik tampilannya:

*{padding: 0; margin: 0;}

.container {
	width: 600px;
	margin: auto;
}

ul {
	list-style:none;
	height: 30px;
}
ul li {
	float: left;
	width: 25%;
	text-align: center;
	line-height: 30px;
}

ul li a{
	display: block;
	text-decoration: none;
	color: white
}

/** Memberikan efek hover **/
ul li:hover{
	opacity: 0.7;
}

/**Mewarnai masing-masing background**/
.peterriver{
	background-color: #3498db;
}

.emerald{
	background-color: #2ecc71;
}

.alizarin{
	background-color: #e74c3c;
}

.orange{
	background-color: #f39c12;
}

Nah, coba teman-teman buka lagi di browser maka tampilannya akan menjadai seperti ini:

Bagaimana teman-teman cukup mudahkan Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3.

Sekian artikel saya hari ini tentang Cara Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Icon Pembayaran Menggunakan HTML5 dan CSS3

Kategori