head>
<meta name="viewport" content="width=device-width, initial-scale=1">

body {margin:0;font-family:Arial}


.button {

Width:100%;

  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  margin-top:5%;
  margin-bottom:10%;
}




.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}



.button2 {
  background-color: #ddd;
  color: blue; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
  }

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3:hover {
  background-color: cyan;
  color: blue;
}

.button_active {
  background-color: #ddd;
  color: blue; 
  border: 2px solid #008CBA;
}

.button_active:hover {
  background-color: #008CBA;
  color: white;
  }

.button_norm {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button_norm:hover {
  background-color: cyan;
  color: blue;




</style>
</head>