How To

Cara Membuat Star Rating di Web

Di bawah ini kita akan mempelajarai cara membuat tampilan “rating bintang” sederhana dengan CSS.

Star Rating

Star rating biasa digunakan untuk dapat memberikan penilaian kepada suatu pelayanan yang diberikan. Berikut ini contohnya : 

<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>

<h2>Contoh Star Rating</h2>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

</body>
</html>

Cara Membuat Star Rating

Langkah 1) Tambahkan HTML:
Contoh

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

Langkah 2) Tambahkan CSS:
Contoh

.checked {
  color: orange;
}

Hanifah Nurbaeti

Share
Tags: CSSHow Torating