[CSS] 様々なエフェクトを加えたボタンのサンプル「Hover.css」

マウスオーバーでエフェクトするボタンのサンプルです。
FontAwesomeのアイコンがアニメーションするものもあり。

[js] クリックするとぼわーーんとエフェクトする「Waves」

ボタンやアイコンをクリックすると、ぼわーーんと気持ちの良いエフェクトが出せる「Waves」。導入も簡単なので、ブログやWebのちょっとした味付けにいいかもしれません。

サポートしているブラウザは、Firefox, Chrome, Safari, IE10以降。

ボタンを押してサイドメニューを表示させるサンプルスクリプト。
メニューがスライドする、メイン画面がスライドする、ドアのようにスライドするなど様々なアニメーションエフェクトが用意されています。

PCからスマートフォンまで、画面サイズにより可変するレスポンシブレイアウトでは、このようなサイドメニューが有効なようで多く見られますね。（PCではメニューを表示して、スマートフォンでは隠してボタンをタップするとメニュー表示するなど）

ポップアップダイアログ、ボタン、リスト、キャプションなどのアニメーションエフェクトCSSのデモが一覧できるページ。CSSコードなどはSource元で確認できます。

色々なエフェクトで表示するポップアップウィンドウ。
くるっと回ったり、背景をぼかしてポップアップを強調したりと面白くも実用的なエフェクトが揃っています。