JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title></title>
</head>
<body>

   <h1>Membuat tombol menarik dengan css</h1>

	<li><a href="" class="button tombol1">Tombol 1</a></li>
	<li><a href="" class="button tombol2">Tombol 2</a></li>
	<li><a href="" class="button tombol3">Tombol 3</a></li>
</body>
</html>

CSS

/*Untuk mempercantik tombol*/
      .button{
      	display: block;
      	width: 100px;
      	margin: 20px;
      	padding: 10px;
      	box-shadow: 1px 1px 2px #8899a9;
      	border-radius: 10%;
      	text-align: center;
      }

      .tombol1{
      	background-color: #00ffff;
      }

      .tombol1:hover{
      	background-color: rgba(28, 114, 44, 0.3);
      }

      .tombol2{
      	background-color: #ffcc11;
      }

      .tombol2:hover{
      	background-color: rgba(191, 165, 251, 0.4);
      }

      .tombol3{
      	background-color: #ff3333;
      }

      .tombol3:hover{
      	background-color: rgba(0, 135, 173, 0.4);
      }

      a{
      	text-decoration: none;
      	color: black;
      }

      li{
      	list-style: none;
      }