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

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

  • PARTS

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;
}

応用編:カスタマイズ

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

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

最後に

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

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