これなら簡単!CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。

サイトのキャプチャ

UI interactions
UI interactions -GitHub

UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。

UI interactionsの使い方

すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。

HTML

HTMLは、button要素にclassを与えるだけでのシンプルな構成です。

CSS

CSSは、コピペで簡単に利用できます。

UI interactionsのデモ

デモでは、ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを楽しめます。

まずは、アローの向きを上下に変えるインタラクション。

サイトのキャプチャ

UI interactions: アローのインタラクション

ハンバーガーメニューは、6種類のインタラクションが用意されています。

サイトのキャプチャ

UI interactions: ハンバーガーメニューのインタラクション

プラス「+」アイコンのインタラクション。

サイトのキャプチャ

UI interactions: プラス アイコンのインタラクション

ボタンをクリック・タップすると、ローディングを表示するインタラクション。

サイトのキャプチャ

UI interactions: ローディング ボタンのインタラクション

ボタンのオン・オフを切り替えるトグルのインタラクション。

サイトのキャプチャ

UI interactions: トグル ボタンのインタラクション

トグルのインタラクションは、15種類用意されています。

サイトのキャプチャ

UI interactions: トグル ボタンのインタラクション

sponsors

top of page

©2019 coliss