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.