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

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{
  background: #333333;
  color: #ffffff;
  box-shadow: 0 4px 8px   rgba(0,0,0,0.6)
}

立体ボタン

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

HTMLとCSSの解説

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

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

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

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

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

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です