ボタンを押したら背景色がグラデーションでランダムに変わるアプリを作りました（+ CSS Animationをちょっと）

作ったアプリ

https://awesome-engelbart-e06e16.netlify.app/
画面中央の文章がずっと点滅します。
ボタンを押すと、背景色が左から右にグラデーションでランダムに変わります。
ライブラリやフレームワークは使わずに、HTML、CSS、Vanilla JavaScriptで作成（リセットCSSだけ使ってます）。

特記事項

文章を点滅させる

@keyframesで点滅のパターンを指定して、animationプロパティに指定しました。

.description {
    animation: blink 2s ease 0s infinite alternate none running;
}

.hex-gradient {
    animation: blink 2s ease 0s infinite alternate none running;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

背景色をグラデーションにする

こちらはbackgroundプロパティにlinear-gradient関数を使用しました。カラーコードをランダムに取得するため、6桁の16進数を取得する必要があり、Math.random().toString(16).slice(-6)で対応しました（でも、これでできる理由はよくわかっていない・・・）。

clickMe.addEventListener('click', () => {
  const left = Math.random().toString(16).slice(-6)
  const right = Math.random().toString(16).slice(-6)
  const colorCode = document.getElementById('color-code')
  document.body.style.background = `linear-gradient(to right, #${left}, #${right})`
  colorCode.textContent = `#${left}, #${right}`
})

ボタン押すとレイアウト崩れる問題

地味にはまったのが、ボタンを押したときに中央の文章がひょこっと上に動くことです。これはbutton:activeに太めのborderを設定しているのが原因っぽいので、outlineというプロパティに変えたところうまくいきました。

輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。

.click-me:active {
    outline: 3px solid #ABB2B9;
}

参考にさせていただいたところ

要素を点滅させる
JavaScriptで超簡単にランダムで数桁の16進数を作成する方法

JavaScriptの練習ネタ
25 Beginner JavaScript Project Ideas

そして、もちろんMDN