【CSS】ボタンを作成するときはこれをコピペすればOK!!汎用的なボタンのコード

ボタンって沢山使う箇所があるのでできるだけCSSは汎用的に使いたいなあ〜って思ったので作成。

コンポーネントとして捉えるのは大切。

<div class="l-btn">
    <a class="btn btn--normal btn--info" href="">
        お申し込みはこちら
    </a>
</div>

.l-btn {
  text-align: center;
}

.btn {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

/* Size */
.btn--normal {
  font-size: 1.4rem;
  padding: 10px 40px;
}

/* Color */
.btn--info {
  color: #FFF;
  background-color: blue;
}

何をしたかというと、
CSSでスタイルをつけるときの 見た目と構造の分離 ですね。

位置を変えたいときは

.l-btn {
  text-align: center;
}

サイズを変えたいときは下記をいじって

/* Size */
.btn--normal {
  font-size: 1.4rem;
  padding: 10px 40px;
}

色を変えたいときは下記をいじる

/* Color */
.btn--info {
  color: #FFF;
  background-color: blue;
}

まとめ

汎用的な使用が期待される部品はできるだけ分離して、再利用できる形にしておくべし。