CSS3で作られたレインボーボタンスタイル

<div class="buttons">
  <h1><code>box-shadow</code> を使用したシンプルなホバー効果</h1>
  <button class="fill">入力</button>
  <button class="pulse">パルス</button>
  <button class="close">閉じる</button>
  <button class="raise">上げる</button>
  <button class="up">記入する</button>
  <button class="slide">スライド</button>
  <button class="offset">オフセット</button>
</div>

/*
  https://developer.mozilla.org/en/docs/Web/CSS/ボックスシャドウ
  box-shadow: [インセット?] [上] [左] [ぼかし] [サイズ] [色];

  ヒント:
    - 塗りつぶしをしっかりしたいので、すべてのぼかしを 0 に設定します。
    - insetキーワードを追加して、box-shadowが要素の内側になるようにします。
    - ホバー時にインセットシャドウをアニメーション化すると、指定した側から要素が埋め込まれているように見えます（[上]と[左]は負の値を受け入れ、[下]と[右]になります）
    - 複数のシャドウを重ねることができます
    - 複数の影をアニメーション化する場合は、アニメーションが滑らかになるように影の数を同じにしてください。そうしないと、途切れ途切れになります。
*/
.fill:hover、
.fill:フォーカス{
  ボックスシャドウ: インセット 0 0 0 2em var(--hover);
}

.pulse:ホバー、
.pulse:フォーカス{
  -webkit-animation: パルス 1 秒;
          アニメーション: パルス 1 秒;
  ボックスシャドウ: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes パルス {
  0% {
    ボックスシャドウ: 0 0 0 0 var(--hover);
  }
}

@keyframes パルス {
  0% {
    ボックスシャドウ: 0 0 0 0 var(--hover);
  }
}
.close:ホバー、
.close:フォーカス{
  box-shadow: インセット -3.5em 0 0 0 var(--hover), インセット 3.5em 0 0 0 var(--hover);
}

.raise:hover、
.raise:focus {
  ボックスシャドウ: 0 0.5em 0.5em -0.4em var(--hover);
  変換: translateY(-0.25em);
}

.up:ホバー、
.up:フォーカス{
  ボックスシャドウ: インセット 0 -3.25em 0 0 var(--hover);
}

.スライド:ホバー,
.スライド:フォーカス{
  ボックスシャドウ: インセット 6.5em 0 0 0 var(--hover);
}

.オフセット{
  ボックスシャドウ: 0.3em 0.3em 0 0 var(--color)、インセット 0.3em 0.3em 0 0 var(--color);
}
.offset:hover、.offset:focus {
  box-shadow: 0 0 0 0 var(--hover)、インセット 6em 3.5em 0 0 var(--hover);
}

。埋める {
  --カラー: #a972cb;
  --ホバー: #cb72aa;
}

。脈 {
  --色: #ef6eae;
  --ホバー: #ef8f6e;
}

。近い {
  --色: #ff7f82;
  --ホバー: #ffdc7f;
}

。上げる {
  --色: #ffa260;
  --ホバー: #e5ff60;
}

。上 {
  --カラー: #e4cb58;
  --ホバー: #94e458;
}

.スライド{
  --色: #8fc866;
  --ホバー: #66c887;
}

.オフセット{
  --カラー: #19bc8b;
  --ホバー: #1973bc;
}

ボタン {
  色: var(--color);
  遷移: 0.25秒;
}
ボタン:ホバー、ボタン:フォーカス {
  境界線の色: var(--hover);
  色: #fff;
}

体 {
  色: #fff;
  背景: #17181c;
  フォント: 300 1em "Fira Sans"、サンセリフ体;
  コンテンツの中央揃え: 中央;
  コンテンツの位置を中央揃えにします。
  アイテムの位置を中央揃えにします。
  テキスト配置: 中央;
  最小高さ: 100vh;
  ディスプレイ: フレックス;
}

ボタン {
  背景: なし;
  境界線: 2px 実線;
  フォント: 継承;
  行の高さ: 1;
  マージン: 0.5em;
  パディング: 1em 2em;
}

h1 {
  フォントの太さ: 400;
}

コード {
  色: #e4cb58;
  フォント: 継承;
}