#green{
  background-color: greenyellow;
}

#red{
  background-color: red;
}

#blue{
  background-color: blue;
}
button{
  border-radius: 5px;
  width: 100px;
  height: 30px;
  margin: 5px;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
}

#green:hover{
  color: green;
  background-color: white;
  border-color: greenyellow;
}


#red:hover{
  color: red;
  background-color: white;
  border-color: red;
}


#blue:hover{
  color: blue;
  background-color: white;
  border-color: blue;
}

.btn-lift{
  padding:12px 26px;
  border:none;
  background:#4CAF50;
  color:white;
  border-radius:6px;
  cursor:pointer;
  transition:0.3s;
}

.btn-lift:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 15px rgba(0,0,0,0.3);
}
h1{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size:44px;
  text-align:center;
  position:relative;
  display:inline-block;
}

h1::after{
  content:"";
  position:absolute;
  width:0%;
  height:4px;
  background:#ff3c3c;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

h1:hover::after{
  width:100%;
}