マウスホバー時に背景がスライドするボタンを作りました。
ブログ等でご活用ください。
左から右にスライド
「linear-gradient」で左から右に「ピンク」→「透過」を50%ずつ指定。「background-position」で透過表示になるようずらし、ホバー時に「background-position」を0にしてスライドさせてます
コードを表示
<a class="btn">
CSSボタン
</a>
.btn {
--color: #e860ce;
cursor: pointer;
margin: 0.5rem;
padding: 1rem 2rem;
border: 1px solid var(--color);
border-radius: 0;
background-image: linear-gradient(90deg, var(--color) 50%, transparent 50%);
background-position: 100%;
background-size: 250%;
color: var(--color);
text-decoration: none;
transition: all 1s;
}
.btn:hover {
background-position: 0;
color: #fff;
}HTML・CSSのカスタマイズや動作確認ができます
上から下にスライド
「linear-gradient」で下から上に「透過」→「オレンジ」を50%ずつ指定。「background-position」で透過表示になるようずらし、ホバー時に「background-position」を0にしてスライドさせてます
コードを表示
<a class="btn">
CSSボタン
</a>
.btn {
--color: #e2b05f;
cursor: pointer;
margin: 0.5rem;
padding: 1rem 2rem;
border: 1px solid var(--color);
border-radius: 0;
background-image: linear-gradient(0deg, transparent 0 50%, var(--color) 50%);
background-position: 100% 100%;
background-size: 100% 300%;
color: var(--color);
text-decoration: none;
transition: all 1s;
}
.btn:hover {
background-position: 100% 0;
color: #fff;
}HTML・CSSのカスタマイズや動作確認ができます
斜めにスライド
「linear-gradient」で斜め左から斜め右に「青」→「透過」を50%ずつ指定。「background-position」で透過表示になるようずらし、ホバー時に「background-position」を0にしてスライドさせてます
コードを表示
<a class="btn">
CSSボタン
</a>
.btn {
--color: #60c2e5;
cursor: pointer;
margin: 0.5rem;
padding: 1rem 2rem;
border: 1px solid var(--color);
border-radius: 0;
background-image: linear-gradient(135deg, var(--color) 50%, transparent 50%);
background-position: 100%;
background-size: 300%;
color: var(--color);
text-decoration: none;
transition: all 1s;
}
.btn:hover {
background-position: 0;
color: #fff;
}HTML・CSSのカスタマイズや動作確認ができます
