CSSだけで角丸枠線グラデーション

枠線グラデーションと角丸は相性がめっちゃ悪い。
一筋縄じゃCSSだけで実装できない。

でもどうにかこうにかやる方法があるので今回は、そんなどうにかこうにかCSSだけで角丸枠線グラデーションを実装する方法のご紹介です。

角丸グラデーション（ボタン背景有り）

HTML

<div class="button1">
  <p>枠線グラデーション</p>
</div>

css

.button1 {
  position: relative;
  background: linear-gradient(to right, #02d3bb, #8027f4);
  border-radius: 100px;
}
.button1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 100px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

線の太さは「width」と「height」の「calc(100% – 10px)」で調整してね！
これの欠点は、背景が画像の時ボタン背景があるところです。

角丸グラデーション（ボタン背景なし）

HTML

<div class="button2">
  <p>枠線グラデーション</p>
</div>

css

.button2 {
  position:relative;
}
.button2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 4px solid transparent;
  background: linear-gradient(to right, #02d3bb, #8027f4) border-box border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
}

枠線の太さは「::before」要素の「border」の値をいじってね！