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

CSSで二重枠線ボタンを作る方法

こんにちは、UVERworld布教クリエイターのゆうやです!

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

↓↓↓

CSSで作る二重枠線ボタン

CSSで作る二重枠線ボタン

いわゆる二重枠線ボタン(?)というものです!

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

本記事ではその方法ともう1つ 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
シャドウのサイズに関して、2つ目のシャドウサイズは1つ目のシャドウサイズの倍に設定するようにしてください(^o^)

参考記事

参考 高さが可変のボックスに二重のボーダーを適用するテクニックのまとめコリス

まとめ

いかがでしたでしょうか。

ボタンはWebサイト制作で必ずと言っていいほど使用するコンポーネントですので今回紹介したようなちょっとしたTipsを1つずつ試していっていざコーディングするときにすぐ実装できるようになれれば最高ですね!

最後までご高覧いただきありがとうございました!

コメントを残す

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