Effet d'animation de survol HTML CSS et Javascript

2,375 ledoc

Ouvrir dans l'éditeur Publiez votre code

Effet d'animation de survol HTML CSS et Javascript

Recommandé

23 November 2025

Animation de carte de crédit réalisée avec Paystack

18 August 2024

Tablette à dessin

16 April 2026

Code HTML simple pour proxy web - Uniub v4

HTML

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
  background: #111;
  display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.button-wrap{
  margin:10px auto;
  text-align: center;
} 
.hover-button{
  position:relative;
  box-sizing: border-box;
  background:rgba(255,255,255,0);
  border:none;
  font-size: 1.5rem;
  color:turquoise;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  overflow:hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  width:200px;
  height:200px;
} 
.hover-button:before{
  --size:0;
  content:'';
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  background:radial-gradient(circle closest-side, turquoise, transparent);
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transition:width 0.2s ease, height 0.2s ease;
  -webkit-transition:width 0.2s ease, height 0.2s ease;
  -moz-transition:width 0.2s ease, height 0.2s ease;
  -ms-transition:width 0.2s ease, height 0.2s ease;
  -o-transition:width 0.2s ease, height 0.2s ease;
}
.hover-button:hover:before{
  --size:200px;
}
.hover-button:hover{
  color:#111;
  cursor: none;
}
.hover-button span{
  position:relative;
  font-weight:bold;
}