bttn.cssで簡単にボタン作成

bttn.cssで簡単にボタン作成

  • 2017-01-21  最終更新日:2017-01-21

簡単にボタンが設置できるbttn.cssのご紹介です。数も12種類のボタンだけで色と大きさが指定できます。

容量も少ないのでさくっと出来ます。下記公式サイトからダウンロードして使うかcdnjsからのリンクでhead内にご使用ください。ここで使っているアイコンフォントも紹介しておきます。

CDNJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.min.css">

スポンサーリンク


使い方

使い方と言うほどでもないですが、ダウンロードしたcssを読み込んでclassにボタンの種類とサイズと色を選べばできあがりです。bootstrapと同じですね。下記はサンプルのボタンコードです。

<button class="bttn-slant bttn-md bttn-primary">medium</button>

<button class="bttn-float bttn-md bttn-success">medium</button>

<button class="bttn-gradient bttn-md bttn-default">medium</button>

<button class="bttn-bordered bttn-md bttn-warning">medium</button>

<button class="bttn-jelly bttn-md bttn-danger">medium</button>

<button class="bttn-minimal bttn-md bttn-royal">medium</button>

<button class="bttn-material-circle bttn-md bttn-danger bttn-no-outline"><i class="icon-menu"></i></button>

種類のクラス名は12種類

bttn-simple, bttn-bordered, bttn-minimal, bttn-stretch, bttn-jelly, bttn-gradient, bttn-fill, bttn-material-circle, bttn-material-flat, bttn-pill, bttn-float, bttn-unite, bttn-slant

大きさは4種類

bttn-xs, bttn-sm, bttn-md, bttn-lg

ブロックレボタンにする場合はbttn-blockを付加するとブロックボタンになります。

色は6種類

bttn-default, bttn-primary, bttn-warning, bttn-success, bttn-danger, bttn-royal

参考になれば幸いです。


∞Tadashi Suyama∞

css button ボタン
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

css button ボタン
フッターイメージ