Effet de vague de clic de bouton de style Android CSS3 pur

Bref tutoriel

css-ripple-effect est un effet d'ondulation de clic de bouton de style plat sympa réalisé en CSS3 pur. Cet effet est calqué sur la vague de clics de style de conception matérielle du système Android.

Utilisation

Introduisez le fichier ripple.css dans la page.

<link href="ripple.css" rel="stylesheet">

Structure HTML

Pour créer un effet de vague de clic pour un élément , il vous suffit d'y ajouter la classe ripple.

<button type="button" class="ripple" >Primary</button>

Style CSS

Vous pouvez modifier le style de l'effet clickwave via le fichier ripple.css ou le fichier ripple.less.

.ripple {
  position: relative;
  overflow: hidden;
  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }
  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }
}

Ce qui précède est le contenu de l'effet de vague de clic de bouton de style Android CSS3 pur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !