TUTO

<a href="#" class="mon-bouton-personnalise">En savoir plus !</a>

.mon-bouton-personnalise {
  width: 200px; 
  height: 60px; 
  font-size: 1.3rem; /* Taille de la police */
  font-family: arial, sans-serif; /* Police du texte */
  font-weight: 700; /* Épaisseur de la police */
  position: relative; 
  color: white; /* Couleur du texte */
  z-index: 0; 
  border: 1px solid #892cdc; /* Bordure du bouton */
  background: black; /* Couleur d'arrière-plan du bouton */
  overflow: hidden;
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 10px; /* Bordures arrondies du bouton */
  margin: auto; 
}

.mon-bouton-personnalise::before {
  content: ''; 
  position: absolute;
  top: 60px;
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #892cdc; /* Couleur d'arrière-plan du pseudo-élément */
  border-radius: 50% 50% 0% 0%; /* Bordures arrondies pour l'effet de survol */
  z-index: -1;
  transition: all .5s; 
}

.mon-bouton-personnalise:hover::before {
  top: 0px; 
  border-radius: 10px; /* Bordures arrondies après le survol */
}