コーポレートサイト制作で使えそうなbutton用フレームワーク作ってみました

コーポレートサイト制作で使えそうなbutton用フレームワーク作ってみました

コーポレートサイトでも使いやすいクラスの命名、フラットデザインだけでなく、立体的なデザインもあり、レスポンシブにも対応しやすいようにと心がけて作ってみました。まだまだ改善の余地はありますが、とりあえずお披露目です〜

Ads

作ろうと思ったきっかけ

作ろうって思ったきっかけは、bootstrapのボタンの命名でdangerっていうのがあって、これはちょっと使いにくいな〜って思っていたんですよね。それに色の数も多いと使いにくいなと。正直、ボタンの色の数は3種類くらいでいいと思うんですよね〜。だったら、勉強がてらフレームワークを作ってみようってことで作ってみました。

Demoページはこちら

使用できるタグ

基本的に使用できるタグはaタグとbuttonタグです。コーポレートサイト作ることを前提であればこれくらいで大体事足ります。

<a href="#" class="btn">a.btn</a>
<button type="button" class="btn">button.btn</button>

ボタンの種類

基本的にdefault > primary > highright > actionの順番です。
bootstrapのdangerとかありますが、「危険」っていうのはちょっと違うかな〜ってことで、こんな命名にしました。

あとコーポレートサイトの場合そんなにボタンの色の種類って必要ないかなって思ってます。まあ、ボタンの色のみで優先度つけること自体おかしいですし、色の数が多ければ多いほどとっちらかるので4種類に抑えました。

flat

フラットなデザインのボタン

<a href="#" class="btn btn--flat--default">default color</a>
<a href="#" class="btn btn--flat--primary">primary color</a>
<a href="#" class="btn btn--flat--highlight">highlight color</a>
<a href="#" class="btn btn--flat--action">action color</a>

flat disabled

フラットなデザインのボタンのdisable時

<a href="#" class="btn btn--flat--default disabled">default disabled</a>
<a href="#" class="btn btn--flat--primary disabled">primary disabled</a>
<a href="#" class="btn btn--flat--highlight disabled">highlight disabled</a>
<a href="#" class="btn btn--flat--action disabled">action disabled</a>

border

ボーダーで作られたボタン

<a href="#" class="btn btn--border--default">default color</a>
<a href="#" class="btn btn--border--primary">primary color</a>
<a href="#" class="btn btn--border--highlight">highlight color</a>
<a href="#" class="btn btn--border--action">action color</a>

border disabled

ボーダーで作られたボタンのdisable時

<a href="#" class="btn btn--border--default disabled">default disabled</a>
<a href="#" class="btn btn--border--primary disabled">primary disabled</a>
<a href="#" class="btn btn--border--highlight disabled">highlight disabled</a>
<a href="#" class="btn btn--border--action disabled">action disabled</a>

rounded

ちょっと立体的なボタン。一昔前のデザインのボタンですね。ターゲットユーザー次第ではまだ使う機会があるのでこれも。

<a href="#" class="btn btn--rounded--default">default color</a>
<a href="#" class="btn btn--rounded--primary">primary color</a>
<a href="#" class="btn btn--rounded--highlight">highlight color</a>
<a href="#" class="btn btn--rounded--action">action color</a>

rounded disabled

ちょっと立体的なボタンのdisable時。

<a href="#" class="btn btn--rounded--default disabled">default disabled</a>
<a href="#" class="btn btn--rounded--primary disabled">primary disabled</a>
<a href="#" class="btn btn--rounded--highlight disabled">highlight disabled</a>
<a href="#" class="btn btn--rounded--action disabled">action disabled</a>

3D

立体的なフラットなボタン。

<a href="#" class="btn btn--3d--default">default color</a>
<a href="#" class="btn btn--3d--primary">primary color</a>
<a href="#" class="btn btn--3d--highlight">highlight color</a>
<a href="#" class="btn btn--3d--action">action color</a>

3D disabled

立体的なフラットなボタンのdisable時。

<a href="#" class="btn btn--3d--default disabled">default disabled</a>
<a href="#" class="btn btn--3d--primary disabled">primary disabled</a>
<a href="#" class="btn btn--3d--highlight disabled">highlight disabled</a>
<a href="#" class="btn btn--3d--action disabled">action disabled</a>

ボタンのsize

ボタンのサイズはdefaultを合わせて5種類です。

<a href="#" class="btn btn--flat--primary btn--jumbo">size jumbo</a>
<a href="#" class="btn btn--flat--primary btn--large">size large</a>
<a href="#" class="btn btn--flat--primary">size default</a>
<a href="#" class="btn btn--flat--primary btn--small">size small</a>
<a href="#" class="btn btn--flat--primary btn--tiny">size tiny</a>

icon right

iconを左右につけることもできます。よくある矢印とかつけられますし、用途によってはSNSのアイコンもできます。

ちなみに、iconは以下を使用しています。

<a href="#" class="btn btn--flat--primary btn--jumbo">size jumbo<i class="btn__icon--right fa fa-angle-right"></i></a>
<a href="#" class="btn btn--flat--primary btn--large">size large<i class="btn__icon--right fa fa-angle-right"></i></a>
<a href="#" class="btn btn--flat--primary">size default<i class="btn__icon--right fa fa-angle-right"></i></a>
<a href="#" class="btn btn--flat--primary btn--small">size small<i class="btn__icon--right fa fa-angle-right"></i></a>
<a href="#" class="btn btn--flat--primary btn--tiny">size tiny<i class="btn__icon--right fa fa-angle-right"></i></a>

icon left

<a href="#" class="btn btn--flat--primary btn--jumbo"><i class="btn__icon--left fa fa-check-circle"></i>size jumbo</a>
<a href="#" class="btn btn--flat--primary btn--large"><i class="btn__icon--left fa fa-check-circle"></i>size large</a>
<a href="#" class="btn btn--flat--primary"><i class="btn__icon--left fa fa-check-circle"></i>size default</a>
<a href="#" class="btn btn--flat--primary btn--small"><i class="btn__icon--left fa fa-check-circle"></i>size small</a>
<a href="#" class="btn btn--flat--primary btn--tiny"><i class="btn__icon--left fa fa-check-circle"></i>size tiny</a>

btn block

親要素の幅分まで広がります。レスポンシブに対応したい場合などに使っていただくといいと思います。

<a href="#" class="btn btn--flat--primary btn--block">btn-block</a>

ブランドカラーを変更する

ブランドカラーを変更することもできます。

_configs.scss

/* -- brand color -- */
$var-brand-default:         #E6E6EA !default;
$var-brand-primary:			#FED766 !default;
$var-brand-highlight:		#2AB7CA !default;
$var-brand-action:			#FE4A49 !default;

おわりに

とりあえず作ってみましたが、運用していけば問題点でてくるので、そのへんは随時更新します。ここのところGithHubで作っていくのが楽しいですね。Starとかもらえると励みになりますし!今後もいろいろ公開してスキルアップにつなげていきたいと思います。

いいなと思ったらシェアお願いします

同じカテゴリーの記事

Ads
ページの先頭へ