css Faire disparaitre un bouton d'action

[Wazz9]

Bonsoir,

Je cherche à faire disparaitre un bouton sur mon site avec un petit effet.
J'ai bien essayé avec display: none mais le résultat est trop brutal, je voudrais une sorte de fondu.

Avec un la fonction opacity ça passe un peu mieux mais c'est pas encore ça, une idée please ?

 

[Nicolas]

Salut Wazz et bienvenue sur Dev.

Avec opacity tu as choisi la bonne option, il te reste à régler la durée de l'effet et cela tu le gères avec transition-duration

.button:hover {
  opacity: 0;
  transition-duration: 1s;
}

Petit exemple sur Codepen, je crois savoir que tu apprécies https://codepen.io/devcometrue/pen/WNxyzWm

 

[Wazz9]

Mais carrément !! Easy ! Merci pour le coup de main

 

[Ziggy]

Bonjour, je viens d'arriver sur le forum
Je voulais savoir comment faire pour que le délai de disparition du bouton soit également actif à sa réapparition.

Merci !

 

[Nicolas]

Hello, bienvenue sur Cocori Web,
Rajoute simplement l'attribut transition-duration au code CSS du bouton

.button {
  margin: auto;
  width: 300px;
  border-radius: 3px;
  background-color: navy;
  font-size: 2em;
  padding: 15px;
  text-align: center;
  transition-duration: 1s;
}

Le retour du bouton après le hover se fera en douceur...

 

[Nicolas]

 

[Ziggy]

Super ! merci