
たったの3ステップでボタン作成!プレデザインCSS「Butns.css」の使い方
通常、CSSのライブラリやフレームワークには、グリッドレイアウトやフォームなどの一連のデザインがパッケージングされていますが、ボタンに関してはカスタマイズ性がそれほど高くないのが現状です。
デザイン性の高いボタンを作りたい時に便利なのが「Butns.css」です。
今回は、ボタン作成に特化したプレデザインCSS「Butns.css」をご紹介します。
「Butns.css」を使うと、フラットでシンプル、そしてカラフルなボタンを簡単に作成することができます。
Butns.cssとは?
Butns.cssとは、ボタンデザインに特化したCSSライブラリです。
一般的なライブラリやフレームワークと違い、Butns.cssはレイアウト要素などを含んでいない軽量なCSSファイルになっており、ボタンデザインに特化しているため「プレデザインCSS」(Pre-designed CSS)と呼ばれることがあります。
ハイパーリンクのclassに必要なタグをセットするだけで、さまざまな外見のボタンを作成できます。
さまざまな種類のボタンを簡単作成
上の写真にもあるように、Butns.cssを使って、ボタンの中身を塗りつぶしたり、縁だけのボタンを作ったりすることができます。
色の指定も自由にできます。
豊富なオプション
暗めの色や明るめの色にボタンの色を調整したり、影をつけたり丸みをつけたりと、さまざまなオプションが用意されています。
使える色はご覧の通りですが、近々のアップデートで利用できる色が増える予定です。
オプションとなるclassは複数指定することも可能です。
使い方
導入は3ステップのみで完了できます。
1. ダウンロード
Butns.cssのホームページで、「Download Now」からZipファイルをダウンロードするか、GitHubからダウンロードします。
2. 読み込み
CSSを任意の場所に配置し、HTMLファイルの中でCSSファイルを呼び出します。
<link href="butns.css" rel="stylesheet">
3. コーディング
続いて、ボタンにする部分をコーディングしていきます。
<a href="#" class="button fill-purple">Button</a>
これだけで、次のようなボタンを作成することができます。
そのほか、Butns.cssのページでは様々なオプションが紹介されています。
デザインしたいスタイルを複数していすることも可能です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング