CSSで二重枠線ボタンを作る方法を2パターン紹介！

こんにちは、ゆうやです！

さっそくですが、あなたはWebサイトのボタンでこういうデザインのを見たことはありますか？

↓↓↓

CSSで作る二重枠線ボタン

いわゆる二重枠線ボタン（？）というものです！

先日関わった案件で上記のボタンを見かけて「どうやって実装しているんだろう？」と疑問に思い調べて見た所、CSSの疑似要素を使って実装していることがわかりました。

本記事ではその方法ともう１つ box-shadowを用いて二重枠線ボタンを作る方法を紹介していきます！

CSSで作る二重枠線ボタン完成イメージ
CSSで作る二重枠線ボタンの共通HTML
CSSの疑似要素で二重枠線ボタンを作る
CSSのbox-shadowで二重枠線ボタンを作る
参考記事
まとめ

CSSで作る二重枠線ボタン完成イメージ

二重枠線ボタンのデモ作ったのでご覧になってください＼(^o^)／

デモページで二重枠線ボタンを見る

CSSで作る二重枠線ボタンの共通HTML

今回作る二重枠線ボタンはHTML構造は共通なので以下をお使い下さい。

index.html

<a href="#" class="Item">CONTACT</a>

CSSの疑似要素で二重枠線ボタンを作る

疑似要素で親要素のボタンより少し大きいサイズでボーダーを作ることで二重枠線を表現しているところがポイントです！

index.css

.Item {
  margin-top: 20px;/*なくてもOK*/
  position: relative;
  border: 1px solid #5bc8ac;
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5bc8ac;
  font-size: 20px;
}
.Item:before {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  border: 2px solid #5bc8ac;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

MEMO

文字サイズや文字色、ボタンサイズなどは用途に合わせて随時変更してください。

CSSのbox-shadowで二重枠線ボタンを作る

「,」で区切ることによりbox-shadowで二重のシャドウを実現している所がポイントです！

index.css

.Item {
  border: 1px solid #5bc8ac;
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5bc8ac;
  font-size: 20px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #5bc8ac;
}

MEMO

シャドウのサイズに関して、２つ目のシャドウサイズは１つ目のシャドウサイズの倍に設定するようにしてください(^o^)