linear-gradientを使ったグラデーションborderのボタンを作ります

2022.08.10最終更新日：2023.09.18

linear-gradientを使ったグラデーションborderのボタンを作ります

こんにちは。五平餅くんです。

本日はこんなデザインのボタンを作ります。

このボタンのポイントは、グラデーションの線が引いてあるところ。

グラデーションの線は意外と厄介なのです。

それではいきましょう！

1 border-image: linear-gradient()ではダメなのか
2 HTMLとCSS
3 hover時に全体の背景を線と同じグラデーションにする
4 最終的なコーディング
5 まとめ

border-image: linear-gradient()ではダメなのか

linear-gradientを使ったグラデーションの線は、border-imageで実現はできます。

しかし、border-imageはborder-radiusを使った角丸のデザインは再現できません。

なので今回はborder-imageを使わずにグラデーションborderのボタンを作っていきます。

HTMLとCSS

linear-gradientを使ったグラデーションborderのボタンのHTMLとCSSはこちらになります。

<div class="inner">
  <div class="ta-center mt50">
    <a href="#" class="gradation-border-btn">
      <span class="gradation-border-btn__txt">クリック</span>
    </a>
  </div>
</div>


/* リセット */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;;
}

/* 基本設定 */
.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.ta-center {
  text-align: center;
}

.mt50 {
  margin-top: 50px;
}

/*　ここから重要！　*/

.gradation-border-btn {
  display: inline-block;
  padding: 2px;/* 線の太さ */
  border-radius: 10px;
  background: linear-gradient(to right, #0099F7, #F11712);/* 線の色 */
}

.gradation-border-btn__txt {
  display: block;
  padding: 10px 20px;
  border-radius: 8px;/* 親要素のborder-radiousより若干小さく */
  background: #fff;
  font-size: 16px;
}

デモはこちら

「inner」と「ta-center mt50」はとりあえず無視していただき、
「gradation-border-btn」と「gradation-border-btn__txt」をご覧ください。

「gradation-border-btn」のpaddingは線の太さです。

.gradation-border-btn {
  display: inline-block;
  padding: 2px;/* 線の太さ */
  border-radius: 10px;
  background: linear-gradient(to right, #0099F7, #F11712);/* 線の色 */
}

paddingは、その子要素を中に押し込み余白を作るので、backgroundで背景を指定しておくと押し込んだ分背景が見えることになります。

今回はlinear-gradient()でグラデーションの背景を指定しているので、グラデーションが2pxチラ見えしています。

そして「gradation-border-btn__txt」の背景色で白（#fff）を指定して、全体が「gradation-border-btn」の指定した背景にならないようにします。

.gradation-border-btn__txt {
  display: block;
  padding: 10px 20px;
  border-radius: 8px;/* 親要素のborder-radiousより若干小さく */
  background: #fff;
  font-size: 16px;
}

また、「gradation-border-btn__txt」のborder-radiusは親要素のborder-radiousより若干小さく指定すると綺麗に角丸になると思います。border-radiusは、実際のボタンの大きさなどによって微調整いただければと思います。

これだけで一応完成はしたのですが、今回はもう一歩踏み込みます。

hover時に全体の背景を線と同じグラデーションにする

（ここからは飛ばしても問題ありません）

さて、cssを若干ややこしくしていきます。

ボタンをhover時に全体の背景を線と同じグラデーションにします。

/* 全く同じ */
.gradation-border-btn {
  display: inline-block;
  padding: 2px;/* 線の太さ */
  border-radius: 10px;
  background: linear-gradient(to right, #0099F7, #F11712);/* 線の色 */
}

.gradation-border-btn__txt {
  display: block;
  position: relative;/* 追加 */
  z-index: 0;/* 追加 */
  padding: 10px 20px;
  border-radius: 8px;/* 親要素のborder-radiousより若干小さく */
  background: #fff;
  font-size: 16px;
}

/* hover用 */
.gradation-border-btn__txt::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(to right, #0099F7, #F11712);
}

/* ここからhover */
.gradation-border-btn:hover .gradation-border-btn__txt {
  background: transparent;
  color: #fff;
  transition: .3s;
}
.gradation-border-btn:hover .gradation-border-btn__txt::after {
  opacity: 1;
  transition: .3s;
}

デモはこちら

少し解説いたします。

「gradation-border-btn__txt」の擬似要素では、「gradation-border-btn__txt」と同じ大きさで線と同じグラデーションのボックスを作ります。

それをposition: absoluteでピッタリ重なるようにします。（top: 0; left: 0;）

この時、z-indexは-1にして、「gradation-border-btn__txt」よりも下に来るようにします。

.gradation-border-btn__txt::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(to right, #0099F7, #F11712);
}

その際、「gradation-border-btn__txt」のz-indexにposition: relativeとz-index: 0を追加しておきましょう。

.gradation-border-btn__txt {
  display: block;
  position: relative;/* 追加 */
  z-index: 0;/* 追加 */
  padding: 10px 20px;
  border-radius: 8px;/* 親要素のborder-radiousより若干小さく */
  background: #fff;
  font-size: 16px;
}

「gradation-border-btn__txt::after」は、opacity: 0で見えなくなっているので、hover時にこれを1にします。

また、同じくhover時に「gradation-border-btn__txt」の背景を透明にして、グラデーション背景の「gradation-border-btn__txt::after」が透けるようにします。

/* ここからhover */
.gradation-border-btn:hover .gradation-border-btn__txt {
  background: transparent;
  color: #fff;
  transition: .3s;
}
.gradation-border-btn:hover .gradation-border-btn__txt::after {
  opacity: 1;
  transition: .3s;
}

これでhoverもいい感じになりました。

最終的なコーディング

<div class="inner">
  <div class="ta-center mt50">
    <a href="#" class="gradation-border-btn">
      <span class="gradation-border-btn__txt">クリック</span>
    </a>
  </div>
</div>


/* リセット */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;;
}

/* 基本設定 */
.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.ta-center {
  text-align: center;
}

.mt50 {
  margin-top: 50px;
}

/*　ここから重要！　*/

.gradation-border-btn {
  display: inline-block;
  padding: 2px;/* 線の太さ */
  border-radius: 10px;
  background: linear-gradient(to right, #0099F7, #F11712);/* 線の色 */
}

.gradation-border-btn__txt {
  display: block;
  position: relative;
  z-index: 0;
  padding: 10px 20px;
  border-radius: 8px;/* 親要素のborder-radiousより若干小さく */
  background: #fff;
  font-size: 16px;
}

/* hover用 */
.gradation-border-btn__txt::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(to right, #0099F7, #F11712);
}

/* ここからhover */
.gradation-border-btn:hover .gradation-border-btn__txt {
  background: transparent;
  color: #fff;
  transition: .3s;
}
.gradation-border-btn:hover .gradation-border-btn__txt::after {
  opacity: 1;
  transition: .3s;
}

デモはこちら

まとめ

今回はHTMLを２段構成にしてlinear-gradientのborderが引かれたボタンを作りました。

できればもう少しシンプルに実現したいところでしたが、方法が見つかりましたらまたご報告いたします！

最後まで読んでいただきありがとうございました！

html&css