HTML / CSS

グラデーション背景ボタン　hover

グラデーション背景を 「0～50%」⇒初期色 / 「50%～100%」⇒ホバー後の色 で指定

下図のようにジュネレーターを使ってグラデーションを作成して、「linear-gradient」でグラデーションの色を指定

CSS
                  
background: linear-gradient(to right, #172eff 0%, #248cff 35%, #30e9ff 50%, #248cff 65%, #172eff 100%);

・グラデーションCSSジェネレーター

背景位置と背景サイズを調整する

CSS
                  
                    background: linear-gradient(to right, #172eff 0%, #248cff 35%, #30e9ff 50%, #248cff 65%, #172eff 100%);
                    background-position: 0 50%;
                    background-size: 200% auto;

・位置：「background-position」で「0 50%」として「初期色」の領域を指定

・サイズ：「background-size」を2倍にするので「200% auto」と指定

・背景色のサイズを2倍にしたので下図のように初期色の「0～50%」が100%になって反映される

hoverで背景位置を動かす

CSS
                  
.btn__link {
    background: linear-gradient(to right, #172eff 0%, #248cff 35%, #30e9ff 50%, #248cff 65%, #172eff 100%);
    background-position: 0 50%;
    background-size: 200% auto;
    transition: background-position 0.5s ease-in-out;
}

.btn__link:hover {
    background-position: 100% 50%;
}

「hover」したら「50%～100%」のホバー後の背景色を指定したいので、「background-position: 100% 50%;」とする。

「transition: background-position 0.5s ease-in-out;」も指定してアニメーションで動かす