CSSでさまざまなスタイルのボタンを簡単に実装できる!モジュール式の拡張可能なCSSライブラリ -Knopf.css

Webページやスマホアプリで使用するボタンをモジュール式の拡張可能なCSSで実装されたライブラリを紹介します。

通常のボタンのさまざまなスタイルだけでなく、アイコン付きボタン、ブロック状のボタン、リフレッシュボタン、グルーピングボタン、プルダウンボタンなどを簡単に実装でき、Webページやスマホアプリだけでなく、プロトタイプにも適しています。

モジュール式の拡張可能なCSSライブラリ -Knopf.css

Knopf.css
Knopf.css -GitHub

Knopf.cssの特徴

Knopf.cssはWebページやスマホアプリ、そしてプロトタイプの両方向けに設計された、モダンCSSで実装されたモジュール式の拡張可能なボタンシステムです。
MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Knopf.css

Knopf.cssのデモ

デモでは、Knopf.cssで実装できるさまざまなスタイルのボタンを確認できます。

デモのキャプチャ

ギャラリー: Knopf.css

ボタンのさまざまなスタイルはclassを変更するだけで簡単に変更でき、下記のデモで試せます。

デモのキャプチャ

デモ: Knopf.css

Knopf.cssの使い方

Step 1: 外部ファイル

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

インストール

パッケージマネージャーを使用して、依存関係としてもインストールできます。

Step 2: HTML

classに.knopfを与えて、あとはボタンのスタイルに必要なclassを加えます。

Knopf.cssにはたくさんのスタイルが用意されています。

See the Pen
Knopf.css – Tests
by Agustín Díaz (@HiroAgustin)
on CodePen.

さらに詳しい使い方は、ドキュメントが用意されています。

サイトのキャプチャ

使い方: Knopf.css

sponsors

top of page

©2020 coliss