[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック

Post on:2018年3月27日

デモ

まずは、実際の動作から見てましょう。
2色の美しいグラデーションを伴ったシャドウは、ボタンのノーマル時・ホバー時・アクティブ時のそれぞれで異なります。

See the Pen Simple button with gradient shadow in CSS by tungu (@tunguska) on CodePen.

実装

Step 1: HTML

HTMLはシンプルで、button要素でボタンを実装しています。

<button>Let's Go !</button>

1	<button>Let's Go !</button>

Step 2: CSS ボタンのスタイル

まずは、ボタンのスタイルから。
ボタンはパープルとピンクの2色を使ったグラデーションで、CSSの変数を使用して実装します。
※変数は使用しなくても実装できます。それぞれの値に代入してください。

/* 変数の定義 */
html, :root {
  --purple: #7f00ff;
  --pink: #e100ff;
}

button {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: relative;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.75em 1.75em;
  border-radius: 50px;
  display: inline-block;
  color: #fff;
  
  /* グラデーション */
  background: -webkit-gradient(linear, left top, right top, from(var(--purple)), to(var(--pink)));
  background: linear-gradient(to right, var(--purple), var(--pink));
}

/* 変数の定義 */

html, :root {

--purple: #7f00ff;

--pink: #e100ff;

}

button {

font-family: "Roboto", sans-serif;

font-size: 16px;

position: relative;

outline: none;

border: none;

-webkit-appearance: none;

-webkit-tap-highlight-color: transparent;

cursor: pointer;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

padding: 0.75em 1.75em;

border-radius: 50px;

display: inline-block;

color: #fff;

/* グラデーション */

background: -webkit-gradient(linear, left top, right top, from(var(--purple)), to(var(--pink)));

background: linear-gradient(to right, var(--purple), var(--pink));

}

Step 3: CSS ボタンのシャドウ

Step 2で定義した変数を利用して、ボタンのシャドウを2色のグラデーションにして実装します。

通常のシャドウは要素に「box-shadow」を適用しますが、この実装では「::after」を使用してボタンの分身を作成し、分身に2色のグラデーションを適用し、実際のボタンの下に表示し、シャドウにしています。

button::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -10px;
  left: 5%;
  height: 110%;
  width: 90%;
  opacity: 0.8;
  border-radius: 50px;
  
  /* グラデーション */
  background: -webkit-gradient(linear, left top, right top, from(var(--purple)), to(var(--pink)));
  background: linear-gradient(to right, var(--purple), var(--pink));
  
  /* シャドウ効果のために要素をぼかす */
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: blur(6px);
  
  /* アニメーションを加えてより美しく */
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

button::after {

content: "";

position: absolute;

z-index: -1;

bottom: -10px;

left: 5%;

height: 110%;

width: 90%;

opacity: 0.8;

border-radius: 50px;

/* グラデーション */

background: -webkit-gradient(linear, left top, right top, from(var(--purple)), to(var(--pink)));

background: linear-gradient(to right, var(--purple), var(--pink));

/* シャドウ効果のために要素をぼかす */

-webkit-filter: blur(6px);

-moz-filter: blur(6px);

-o-filter: blur(6px);

-ms-filter: blur(6px);

filter: blur(6px);

/* アニメーションを加えてより美しく */

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

ホバー時も同様に「::after」を使用して、シャドウを作成します。

button:hover::after {
  /* ぼかし効果の変更 */
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);

  /* スタイルのプロパティも少し変更 */
  width: 100%;
  bottom: -5px;
  left: 0;
}

button:hover::after {

/* ぼかし効果の変更 */

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

/* スタイルのプロパティも少し変更 */

width: 100%;

bottom: -5px;

left: 0;

}

アクティブ時もホバー時と同様です。

button:hover:active::after {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

button:hover:active::after {

-webkit-filter: blur(10px);

-moz-filter: blur(10px);

-o-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

}

IEとEdgeの対応

IEとEdgeには、サポートされていない機能があります。

/* Edgeは、ぼかし効果をサポートしていないため、シャドウを削除。 */

@supports (-ms-ime-align: auto) {
  button::after, button:hover::after, button:active::after {
    display: none;
  }
}


/* IEは、CSSの変数とぼかし効果をサポートしていません。 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* 変数を使用せずに、直接記述することで対応 */
  button {
    background: -webkit-gradient(linear, left top, right top, from(#7f00ff), to(#e100ff));
    background: linear-gradient(to right, #7f00ff, #e100ff);
  }
  /* シャドウを削除 */
  button::after, button:hover::after, button:active::after {
    display: none;
  }
}