.buttons {
  background-color: #4CAF50; /* Green */
  color: white;
  padding: 9px 7px 10px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  width:130px;
   /*font-weight: bold;*/
  margin: 15px 9px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 20px;
  outline: none;
  /*opacity: 1;*/
  letter-spacing:3px;
}





.btngreen{
  background-color: #008000; 
   background-image: linear-gradient(to bottom right, #008000,#009933,#99ff99);
  color:  white;
  border: 2px solid #009933;
}

.btngreen:active {
  transform: translateY(4px);
}

.btngreen:hover {
  color: white;
  background-image: linear-gradient(to bottom right, #001a00,#009900,#1aff1a);
  /*opacity: 0.7;*/
}

.btnblue{
  background-color: #000080; 
  background-image: linear-gradient(to bottom right,#01579B,#3366ff,#81D4FA);
  color:  white;
  border: 2px solid #3366ff;
}

.btnblue:active {
  transform: translateY(4px);
}

.btnblue:hover {
  color: white;
  /*opacity: 0.7;*/
  background-image: linear-gradient(to bottom right,#00001a,#0000b3,#3366ff,#81D4FA);
}

.btnred{
  background-color: #4d0000; 
 background-image: linear-gradient(to bottom right,#b30000,#e60000,#F6BDC0);
  color:  white;
  border: 2px solid #b30000;
}

.btnred:active {
  transform: translateY(4px);
}

.btnred:hover {
  color: white;
  /*opacity: 0.7;*/
  background-image: linear-gradient(to bottom right,#4d0000,#990000,#e60000,#F6BDC0);
}

.btnyellow{
  background-color: #eb7c0e; 
  background-image: linear-gradient(to bottom right,#cc3300,#e65c00,#ffff33);
  color:  white;
  border: 2px solid #e65c00;
}

.btnyellow:active {
  transform: translateY(4px);
}

.btnyellow:hover {
  color: white;
  background-image: linear-gradient(to bottom right,#994d00,#cc3300,#e65c00,#ffff33);
  /*opacity: 0.7;*/
}

.btncyan{
  background-color: #0cc0c9; 
  color:  white;
  border: 2px solid #0cc0c9;
}

.btncyan:active {
  transform: translateY(4px);
}

.btncyan:hover {
  color: white;
  opacity: 0.8;
}




.btnmid{
  background-color: #000080; 
  background-image: linear-gradient(to right,#ffffff,#3366ff,#3366ff,#3366ff,#ffffff);
  color:  white;
  border: 2px solid #3366ff;
}

.btnmid:active {
  transform: translateY(4px);
}

.btnmid:hover {
  color: white;
  /*opacity: 0.7;*/
  background-image: linear-gradient(to right,#00001a,#0000b3,#3366ff,#81D4FA);
}