これは便利で簡単! モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。

角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。

モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

100 Modern CSS Buttons
100 Modern CSS Buttons -GitHub

100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。

ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソースであろうとクローズドソースであろうと、好きなように使用できます、とのことです。帰属は必要ありません。

サイトのキャプチャ

100 Modern CSS Buttons

ボタンは、シンプルなHTMLとCSSで実装されています。JavaScriptはなしです。右上のコピーボタンをクリックすると、簡単にコピペできます。

サイトのキャプチャ

Basic -100 Modern CSS Buttons

CSSアニメーションはシンプルなものから、ちょっと変わったものまで、いろいろ揃っています。

サイトのキャプチャ

Over Fold -100 Modern CSS Buttons

たとえば、上記のボタンは「Over Fold」と呼ばれるものです。
ホバーまたはクリックすると、右下から左上にコーナーを移動して、背景が表示されるボタンです。下記のようにclip-pathをアニメーションさせています。

See the Pen
CSS Button, explained.
by Eluda (@eludadev)
on CodePen.

HTMLは、下記の通りです。

CSSはアニメーションが少し複雑なので、コードは長めです。

sponsors

top of page

©2022 coliss