枠を装飾するborder-image-sourceを使えば、linear-gradientを指定することで枠がグラデーションになったボタンを作ることができますが、欠点として角を丸くすることができません。

なんで…？と思いますが、わかりません。とにかくできません。

でもデザイナーはそんなことはお構いなしにデータを送ってきますので、「できません」と返信する前に角丸になったグラデーションのボタンをちょっと考えて作ってみましょう。

サンプル

サンプルを見てみましょう。

See the Pen
枠がグラデーションになったボタン by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

枠がグラデーションになった角丸ボタンです。

HTML

HTMLはこんな感じです。

<div class="button">
  <a href="#"><span>BUTTON</span></a>
</div>

<a>要素を直接使うと後々トラブルになりそうなので、<div>で囲んでおきます。

CSS

CSSはSCSSを使っています。

.button {
  a {
    background: linear-gradient(90deg, #56c6f2 0%, #ff7c9c 100%);
    display: inline-block;
    padding: 0.25rem 0.25rem;
    border-radius: 2rem;
    text-decoration: none;

    span {
      font-weight: bold;
      letter-spacing: 0.2rem;
      display: block;
      background: #ffffff;
      padding: 0.75rem 2.5rem;
      border-radius: 2rem;
      color: #56c6f2;
      transition: all 0.1s linear;
    }

    &:hover {
      span {
        background: transparent;
        color: #ffffff;
      }
    }
  }
}

複雑に見えますが作り自体は単純です。

まず、見た目はこうなっています。

これを分解するとこうなります。白色が<span>要素、グラデーションが<a>要素です。

この2つの要素をサイズ違いで組み合わせることで、擬似的に背景色を枠に見せることができます。

background: linear-gradient

ボタンの基礎になる<a>にグラデーションをかけておきます。これが枠のグラデーションになります。

padding: 0.25rem 0.25rem;

<a>にある0.25rem = 4pxのpaddingを入れてあります。これが<a>から<span>までの余白 = 枠の太さになります。

border-radius: 2rem;

<a>要素の角を丸くします。

display: block;

<span>要素を<a>要素ピッタリの大きさにするため、display: block;にしておきます。ブロックレベルの<div>要素とかを使ってもだいじょうぶです。

background: #ffffff;

<span>要素の背景を指定します。今回は白色です。これを入れて<a>に<span>が重なることで擬似的に<a>のbackground: linear-gradientを枠のように見せています。

border-radius: 2rem;

<span>にも<a>と同じ値を入れておきます。

制作のヒント

テキストにもグラデーションをかけることで、よりリッチなボタンを作ることができます。テキストにグラデーションをかける方法は下記の記事で紹介していますので、ひと手間を加えてみましょう。