疑似要素を使わないスライドボタン

ボタンにマウスが重なると、背景の色がスライドして変化するボタンですが、ネット上に掲載されているものは疑似要素を使うものばかりでしたので、疑似要素を使わないタイプをご紹介します。

なぜ疑似要素はダメなのか？

疑似要素は<a>要素には使用できますが、<button>要素には使用できません。これではWebサイト内のインタラクションが統一できなくて困る場合があります。

コードです

button ,
a.slide-button {
padding:20px;
min-width:300px;
font-size:1.2em;
text-align:center;
border:none;
cursor: pointer;
font-weight:bold;
color:#fff;
}

こちらはボタンの基本的なデザインですので、自由にしてください。
ボタンの幅や高さはどのように変わっても大丈夫です。

.slide-button {
transition:0.4s;
background:linear-gradient(90deg,#e33 0%,#e33 50%,#33e 50%,#33e 100%);
background-size: 200% auto;
background-position: 100%;
}
.slide-button:hover {
background-position: 0%;
}

こちらが必要な部分です。
「.slide-button」というクラスを付けることで、<a>要素でも<button>要素でも、スライドタイプのボタンになります。

<button class="slide-button">すごいボタン</button>

HTMLとしてはこんな感じです。
特に何も変わったところはありません。

カスタマイズ

色の変更

linear-gradient()で指定していますので、自由に変更してください。

動きを逆に

上記コードでは左から右に変わります。
background-positionの「0」と「100%」を逆にすると、右から左に動きます。

以上です。