All Free <Script>

tips and tricks per webmaster

Come si crea un pulsante che “pulsa”

4 Dicembre 2020        

Per ottenere l’effetto voluto useremo i css3 transform e animation. Per realizzare la grafica del pulsante utilizzeremo bootstrap.

Di seguito il codice html:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-primary btn-lg pulse">pulse</button>:

Questo รจ il codice css:


.pulse {
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  50% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

Qui troverete una demo funzionante.