CSS: Membuat Menu menarik di html menggunakan css - Make beautiful menus with css

Assalamualaikum wr.wb Hallo sobat peniticode yang masih bersemangat, kali ini saya akan membahas mengenai bagaimana membuat menu sederhana di html dengan tampilan yang menarik. pertama alat yang perlu dipersiapkan tidak lain text editor kita tp jangan lupa untuk untuk menyalakan web server kita dulu disini saya menggunakan xampp control panel v3.2.2.

langsung saja berikut cript yang saya pakai dan bisa sobat sekalian terapkan maupun modif sesuai kreatifitas masing, silahkan lihat tutorial versi video di membuat menu menggunakan css.

Script CSS

 <style>
body{
  margin: 10% 10%;
  font-family: sans-serif;
}

.button{
  text-decoration: none;
  display: block;
  font-size: 24px;
  margin: 10px;
  padding: 5px 5px;
  color: white;
  width: 200px;
 text-align: center;
  border-radius: 10px;
}

.no-1{
  background-color: rgba(249, 77, 77, 0.73);
}

.no-1:hover{
  background-color: rgba(249, 77, 77, 0.98);
}
.no-2{
  background-color: rgba(57, 213, 255, 0.69);
  box-shadow: 0 3px 5px 0 rgba(96, 91, 91, 0.68);
}

.no-2:hover{
  background-color: rgba(57, 213, 255, 0.98);
}

.no-3{
  background-color: rgb(245, 249, 61);
}
</style>  

HTML

 <!--- Tutorial Membuat Menu dengan CSS sederhana -->

<h1> Tips Membuat Menu dengan CSS</h1>
<a href="#" class="button no-1">Menu 1</a>
<a href="#" class="button no-2">Menu 2</a>
<a href="#" class="button no-3">Menu 3</a>

Nah seperti itu kira-kira sobat untuk pembuatan menu sederhana menggunakan css, silahkan dipelajari dan diterapkan maupun modif sesuai kreatifitas sobat semua, mungkin itu dulu dari saya pada kesempatan kali ini kita lanjutkan lagi pada tutorial selanjutnya untuk pengembangan konsep dasar css.