[CSS]楽しい動きが満載!ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css

ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート(SASSも有り)を紹介します。

40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。

サイトのキャプチャ

Hover.css
Hover.css -GitHub

Hover.cssの使い方

使い方は非常に簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

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

一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK!

Step 2: HTML

あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。

<a class="button grow">Add to Basket</a>

buttonのclassは、下記のデモ用の簡単なボタンのスタイルが定義されているだけです。

Hover.cssのデモ

実装は非常に簡単なので、デモを掲載してみました。
カテゴリは、2Dの変形、borderを使ったエフェクト、シャドウとグロウのエフェクト、吹き出し状、カールの5つです。

2D Transforms

Border Transitions

Shadow and Glow Transitions

Speech Bubbles

Curls

top of page

©2017 coliss