Effetto hover sul pulsante
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 41 di 43.
Sfida
FacileUn pulsante è già presente nell'HTML. Il tuo obiettivo è farlo ingrandire leggermente quando l'utente ci passa sopra con il puntatore. Nel CSS, applica uno stile a .cta-button in modo che:
- Abb abbia una transizione fluida
transition: transform 0.3s ease;. - Al passaggio del puntatore, aumenti leggermente di dimensioni usando
transform: scale(1.05).
Provalo tu
<html>
<head>
<title>Button Hover Effect</title>
<style>
/* Add your styles here */
.cta-button {
background-color: #6a1b9a;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
</style>
</head>
<body>
<button class="cta-button">Click Me</button>
</body>
</html>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogo6Pagina di destinazione
Stilizzare la sezione dell’intestazioneStilizzare il pulsanteLayout delle sezioniLayout delle schedeAggiungere gli ultimi ritocchi9Sfide finali
Evidenziare il menu attivoRighe alternate nella tabellaEffetto hover sul pulsanteLayout a griglia per schedeImmagine hero sfocataEsercitati da solo: Playground Web