Hover.css è una collezione di effetti css pronti da utilizzare per rendere più interessanti i pulsanti, il logo e le immagini di un sito web. Hover css è molto semplice da utilizzare perché consiste in un solo foglio di stile css e non richiede l’utilizzo di javascript.

Usare Hover css

Per prima cosa scaricare dal sito ufficiale il foglio di stile e poi, includerlo nell’intestazione del proprio documento (elemento head).

<head>
 <link rel="stylesheet" type="text/css" href="css/hover-min.css">
</head>

Per risparmiare qualche kilobyte si consiglia di utilizzare la versione minimizzata, hover-min.css, invece della versione formattata e con commenti.

Nell’esempio, l’effetto viene applicato a un collegamento (elemento a) e sarà migliore se all’elemento vengono assegnate dimensioni e un colore di sfondo.

<style>
a {
 display: block;
 text-decoration: none;
 text-align: center;
 width: 200px;
 height: 40px;
 line-height: 40px;
 background-color: #e1e1e1;
}
</style>

Applicare all’elemento da animare, la classe che corrisponde all’effetto che si vuole utilizzare, nell’esempio la classe hvr-float-shadow.

<p><a href="#" class="hvr-float-shadow">Login</a></p>

Visualizzare il risultato finale nel browser sovrapponendo il mouse al collegamento. Gli effetti disponibili sono numerosi, l’elenco completo è disponibile nel sito ufficiale in cui è presente anche una demo degli effetti.

Alcuni effetti interessanti sono mostrati nel seguente esempio.

<p><a href="#" class="hvr-float-shadow">Login</a></p>
<p><a href="#" class="hvr-overline-reveal">Login</a></p>
<p><a href="#" class="hvr-underline-from-center">Login</a></p>
<p><a href="#" class="hvr-shadow">Login</a></p>
<p><a href="#" class="hvr-bubble-float-right">Login</a></p>
<p><a href="#" class="hvr-curl-top-left">Login</a></p>

Il risultato è mostrato nella seguente immagine.

Hover css: alcuni effetti disponibili

Hover css: alcuni effetti disponibili

Hover.css può essere utilizzato anche insieme a FontAwesome. È inoltre possibile utilizzare Hover.css in SASS o LESS.

Il supporto dei browser

Gli effetti di Hover css sono realizzati mediante le transizioni css, le animazioni css e le trasformazioni css, che sono supportate da tutti i browser moderni.

Internet Explorer supporta queste tecniche css solo a partire dalla versione 10.

Ulteriori informazioni sul supporto da parte del browser delle proprietà css usate da Hover.css, consultare il sito Can I use.