button {
    display: inline-block;
    background-color: #7b38d8de;
    border-radius: 10px;
    border: 4px double #935116;
    color: #eeeeee;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 200px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }

  button:hover {
    background-color: rgb( 0, 151, 167 );
    color: #fd7c04;
  }





  /* bonton2 */

  .button-2 {
   
    display: inline-block;
    background-color: #1f78dd00;
    border-radius: 50px;
    border: 4px double #ffa07a;
    color: #e48966;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 240px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: cell;
    margin: 10px;
  }

  .button-2:hover {
    border: 4px double #00FF00;
    background-color: rgba(13, 180, 110, 0.329);
    color: #00FFFF;
  }

 
/* bonton3 */

.button-3 {
   
  display: inline-block;
  background-color: #cc88883d;
  border-radius: 50px;
  border: 4px double #c2483f;
  color: #e48966;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  width: 120px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  cursor: progress;
  margin: 10px;
}

.button-3:hover {
  border: 4px double #00FF00;
  background-color: rgba(13, 180, 110, 0.329);
  color: #00FFFF;
}