さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ

HTMLはシンプルに最小限、26種類のさまざまなデザインのボタンを実装されたコレクションを紹介します。

ボタンのスタイルはSASSを使用してコンポーネントベース生成されており、さまざまなボタンのデザインをモジュール式で簡単に利用できます。

サイトのキャプチャ

Buttons
Buttons -GitHub

ここで紹介するボタンのHTMLはすべて、共通です。
classを変更するだけで、簡単にデザインを変更できます。

ボタンはマテリアルデザインのカラー、グレースケール、選択不可状態があり、サイズはSmall, Regular, Mediun, Largeが用意されています。

シンプルなHTMLで実装するボタン

Alpha
フラットデザインのボタン。

シンプルなHTMLで実装するボタン

Beta
CSS3の最初のステップ。

シンプルなHTMLで実装するボタン

Gamma
キャンディのようなかわいいボタン。

シンプルなHTMLで実装するボタン

Delta
少し光沢があるボタン、フラットとは異なります。

シンプルなHTMLで実装するボタン

Epsilon
いかにも押せそうなスキューモーフィズムなボタンのデザイン。

シンプルなHTMLで実装するボタン

Zeta
Fにインスパイアを受けたボタン。

シンプルなHTMLで実装するボタン

Eta
光沢のあるグロッサリーのボタン。

シンプルなHTMLで実装するボタン

Theta
ボーダーがずれたボタン。ホバーで矩形とボーダーが入れ替わります。

シンプルなHTMLで実装するボタン

Iota
角丸のかわいいボタン。ホバー時にアニメーションで反転します。

シンプルなHTMLで実装するボタン

Kappa
クリックするとへこむボタン。

シンプルなHTMLで実装するボタン

Lambda
クリックすると内側にシャドウが増えるボタン。

シンプルなHTMLで実装するボタン

Mu
シンプルに角丸ソリッドのボタン。

シンプルなHTMLで実装するボタン

Nu
あらゆる背景にマッチするゴーストボタン。ホバーで変形します。

シンプルなHTMLで実装するボタン

Xi
クリックするエフェクトにこだわったボタン。

シンプルなHTMLで実装するボタン

Omicron
オーブのように輝いたデザインのボタン。

シンプルなHTMLで実装するボタン

Pi
マシュマロ風のかわいいボタン。

シンプルなHTMLで実装するボタン

Rho
内側にネストされたボタン。

シンプルなHTMLで実装するボタン

Sigma
シンプルなソリッドのボタン。

シンプルなHTMLで実装するボタン

Tau
フラットデザインでよく見かけるボタン。

シンプルなHTMLで実装するボタン

Upsilon
アフォーダンスを少し加えたフラットなボタン。

シンプルなHTMLで実装するボタン

Phi
ナッツのボタン。

シンプルなHTMLで実装するボタン

Chi
ホバー時にカーテンが下がるエフェクト。

シンプルなHTMLで実装するボタン

Psi
ダークUI用のボタン。

シンプルなHTMLで実装するボタン

Omega
フラットなボタンにラインのアニメーションを加えたボタン。

sponsors

top of page

©2018 coliss