CSSでさまざまなスタイルのボタンを簡単に実装できる！モジュール式の拡張可能なCSSライブラリ -Knopf.css
Post on:2020年8月3日
sponsors
Webページやスマホアプリで使用するボタンをモジュール式の拡張可能なCSSで実装されたライブラリを紹介します。
通常のボタンのさまざまなスタイルだけでなく、アイコン付きボタン、ブロック状のボタン、リフレッシュボタン、グルーピングボタン、プルダウンボタンなどを簡単に実装でき、Webページやスマホアプリだけでなく、プロトタイプにも適しています。
Knopf.cssの特徴
Knopf.cssはWebページやスマホアプリ、そしてプロトタイプの両方向けに設計された、モダンCSSで実装されたモジュール式の拡張可能なボタンシステムです。
MITライセンスで、商用プロジェクトでも無料で利用できます。
Knopf.cssのデモ
デモでは、Knopf.cssで実装できるさまざまなスタイルのボタンを確認できます。
ボタンのさまざまなスタイルはclassを変更するだけで簡単に変更でき、下記のデモで試せます。
Knopf.cssの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="/knopf.min.css"> </head> |
インストール
パッケージマネージャーを使用して、依存関係としてもインストールできます。
|
1 2 3 |
npm install knopf.css yarn add knopf.css |
Step 2: HTML
classに.knopfを与えて、あとはボタンのスタイルに必要なclassを加えます。
|
1 2 3 |
<button class="knopf large wide pill"> Button </button> |
Knopf.cssにはたくさんのスタイルが用意されています。
See the Pen
Knopf.css – Tests by Agustín Díaz (@HiroAgustin)
on CodePen.
さらに詳しい使い方は、ドキュメントが用意されています。
sponsors
