【コピペ可】HTMLとCSSでボタンのコーディング７選

今回は、HTMLとCSSを使ったウェブデザインでよくでてくるボタンの実例集です。汎用的なデザインを集めているのでコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。無駄な装飾は避けシンプルで基本的なボタンのデザイン例のみに厳選しているので、フロントエンド初学者でもカスタマイズしてコードを再利用できます。

共通のHTMLとCSS

共通HTML

ボタンはすべて同じHTMLでできています。

<div class="btn btn-skin">ボタン</div>

共通CSS

全てのボタンは以下のCSSのみ共通して使用しています。独自CSSと合わせて設定してください。

.btn{
  min-width: 120px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: .75em 1.5em;
  text-align: center;
  line-height: 150%;
  font-size: 16px;
}

独自CSS

基本のボタン

.btn-skin{
  background: #333333;
  color: #ffffff;
}

シンプルなボタン

.btn-skin{
  border-radius: 6px;
  background: #333333;
  color: #ffffff;
}

枠線なボタン

.btn-skin{
  border: solid 2px #333333;
  background: #ffffff;
  color: #333333;
  font-weight: bold;
}

.btn-skin{
  border-radius: 2.25em;
  background: #333333;
  color: #ffffff;
}

.btn-skin{
  border-radius: 8px;
  background: #333333;
  color: #ffffff;
  border-bottom: solid 4px #050505;
}

.btn-skin{
  border-radius: 6px;
  background: linear-gradient(#555555, #050505);
  color: #ffffff;
  border: solid 1px #000000;
}

HTMLとCSSの解説

HTMLの構造はほとんど変わらない

今回のボタンのHTML構造は全て同じです。ボタンは核となるHTMLの構造がしっかりできていれば、残りのデザインはとても簡単に実装できるのです。

CSSは形やレイアウトと装飾部分をわけるとシンプルになる

CSSも基本となる大きさや文字を上下左右中央揃えにする部分は使い回しができますし、多くのパターンは装飾部分の違いだけで対応できます。形やレイアウト部分とそれ以外の部分でわけて記述しておくことでCSSをシンプルに扱うことができます。

この記事をかいてみての感想

Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます！

▼感想
これから、カードやぱんくずリストなどいろいろなコピペ集をつくっていきます。写経して実力をつけるもよし、雛形として使うもよしです。