• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

HTMLとCSSのみで作ったシンプルでカスタマイズしやすいボタンパーツ

ボタンのパーツを実装した結果のイメージ

HTMLとCSSのみで作ったシンプルなボタンパーツです。
サイトに合わせてカスタマイズする前提で最低限の構成にしています。

実際のコード

<div class="btn">ボタン</div>
@mixin btn($bg, $color, $w, $h, $hover:true) {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid $bg;
  box-shadow: darken($bg, 20%) 0 5px 0;
  background: $bg;
  color: $color;
  width: $w;
  height: $h;
  cursor: pointer;
  @if ($hover == true) {
    transition : all .3s ease 0s;
    &:hover {
      color: $bg;
      background: $color;
      box-shadow: none;
    }
  }
}

.btn {
  @include btn(#666, #fff, 200px, 50px);
}

なおCSSの場合は@mixinが利用できないため以下のような記述になります。
マルチクラスの想定であればある程度使い回せますが、効率を考えると、
SCSSまたはSassで利用するほうがやはりオススメです。

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #666;
  box-shadow: #333 0 5px 0;
  background: #666;
  color: #fff;
  width: 200px;
  height: 50px;
  cursor: pointer;
  transition : all .3s ease 0s;
}

.btn:hover {
  color: #666;
  background: #fff;
  box-shadow: none;
}

実装の結果

parts-button

応用編:カスタマイズ

// 色とサイズを変えてみる
.btn1 {
  @include btn(#5d99c6, #fff, 220px, 44px);
}

parts-button2

// 色やサイズを変えつつ角丸にする
.btn2 {
  @include btn(#4f9a94, #80cbc4, 220px, 44px);
  border-radius: 5px;
}

parts-button3

最後に

最低限のスタイルをもたせた@mixinでパーツの原型を作っておくと、
応用も利かせやすく使い回しがはかどると思います。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND