CSSだけでできる、綺麗なグラデーションボタンの作り方をご紹介します。
マウスオーバー時のアニメーションが綺麗です。
コピペで実装できるので是非ご使用ください。
ホバーで沈む
浮き上がったボタンのグラデーションボタンです。
マウスオーバーすると少し沈みます。
ユーザーに「押せる感」を与えられます。
ホバーで浮き上がる
マウスオーバーすると浮き上がります。
立体感があってとても綺麗です。
ホバーでグラデーションが変化
マウスオーバーするとグラデーションが右から左へと変化します。
似たような色のグラデーションを指定していると変化に気づきづらいかもしれません。
シンプルなホバーエフェクトなら「CSS WAND」
シンプルなボタンデザインを作りたい場合は「CSS WAND」が便利です。
コピペでできるので、CSSがよくわからないって方でも簡単に実装できます。