Petit snippet HTML + CSS pour créer un bouton moderne avec une animation au survol (hover). 
Très utile pour améliorer l’expérience utilisateur et donner un style plus dynamique à un site web.


Snippet


HTML 


<button class="btn-hover">

Voir plus

</button>

CSS 


.btn-hover {

  background: <a href="/search.php?q=2563eb" class="hashtag">#2563eb</a>;

  color: white;

  border: none;

  padding: 12px 24px;

  font-size: 16px;

  border-radius: 6px;

  cursor: pointer;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

} 


.btn-hover:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 15px rgba(0,0,0,0.2);

}


Résultat


Quand l’utilisateur passe la souris sur le bouton :

  • le bouton se soulève légèrement
  • une ombre apparaît
  • l’animation est fluide grâce à transition


Cela donne un effet moderne et interactif.


Explication rapide


transition 


transition: transform 0.3s ease;

Permet d’ajouter une animation fluide lors du changement de style.


transform 


transform: translateY(-3px);

Déplace le bouton vers le haut pour créer un effet “flottant”.


box-shadow 


box-shadow: 0 8px 15px rgba(0,0,0,0.2);

Ajoute une ombre pour donner un effet de profondeur.


Idée d’utilisation


Ce type de bouton est très utilisé dans :

  • pages d’accueil
  • landing pages
  • boutons d’action (CTA)
  • portfolios
  • interfaces modernes


#css #html #snippet #webdesign #developpementweb #animationcss