HTML・CSS・jQueryを使ったボタン・リンクに活用できるアクションサンプルです。
コピペですぐにご使用いただけます。
マウスオーバーアクションはスマートフォン・タブレットではご覧いただけませんので、パソコンでご覧ください。
※各ボタンをクリックすると各ボタン詳細へ遷移します。
グラデーションが変化するボタン
マウスのカーソルをボタンに重ねると背景色がゆっくりと変わります。
グラデーションでなくてもゆっくりと色を変えたいときにも使えます。
輝くボタン
マウスのカーソルをボタンに重ねると背景色がゆっくりと変わります。
背景色を金色・銀色などにするとさらに輝いているように見えます。
右に伸びるボタン
マウスのカーソルをボタンに重ねると右方向に伸びます。
「margin: 0 0 0 auto;」をつけると左方向に伸びるよう変更できます。
枠線が縮小して重なるボタン
マウスのカーソルをボタンに重ねると白い枠線がが消えます。
線が出現するボタン
マウスのカーソルをボタンに重ねると下側に中央から線が出現します。
Y軸方向に回転するボタン
マウスのカーソルをボタンに重ねるとX軸を基準にY軸方向に回転します。
振動するボタン
マウスのカーソルをボタンに重ねるとグラグラと揺れます。
拡大するボタン
マウスのカーソルをボタンに重ねるとボタンが拡大します。