willlab - ウィルラボ
  • TOP
  • TOOLS
  • NOTES
  • CONTACT
  • TOP
  • NOTES
  • ボタン・リンクのサンプル集1

NOTES

ボタン・リンクのサンプル集1

マウスオーバーした際に魅力的なボタンやリンクのアクション例一覧です。

ボタン・リンクのサンプル集1
ツイート

このエントリーをはてなブックマークに追加

HTML・CSS・jQueryを使ったボタン・リンクに活用できるアクションサンプルです。
コピペですぐにご使用いただけます。
マウスオーバーアクションはスマートフォン・タブレットではご覧いただけませんので、パソコンでご覧ください。
※各ボタンをクリックすると各ボタン詳細へ遷移します。

  • ボタン1
  • ボタン2
  • ボタン3
  • ボタン4
  • ボタン5
  • ボタン6
  • ボタン7
  • ボタン8

グラデーションが変化するボタン

マウスのカーソルをボタンに重ねると背景色がゆっくりと変わります。
グラデーションでなくてもゆっくりと色を変えたいときにも使えます。

輝くボタン

マウスのカーソルをボタンに重ねると背景色がゆっくりと変わります。
背景色を金色・銀色などにするとさらに輝いているように見えます。

右に伸びるボタン

マウスのカーソルをボタンに重ねると右方向に伸びます。
「margin: 0 0 0 auto;」をつけると左方向に伸びるよう変更できます。

枠線が縮小して重なるボタン

マウスのカーソルをボタンに重ねると白い枠線がが消えます。

線が出現するボタン

マウスのカーソルをボタンに重ねると下側に中央から線が出現します。

Y軸方向に回転するボタン

マウスのカーソルをボタンに重ねるとX軸を基準にY軸方向に回転します。

振動するボタン

マウスのカーソルをボタンに重ねるとグラグラと揺れます。

拡大するボタン

マウスのカーソルをボタンに重ねるとボタンが拡大します。

DXO株式会社では一緒に働く
仲間を募集しています!

DXO株式会社ではWeb開発エンジニア、Webディレクター、Webデザイナーなど様々な職種で一緒に働く仲間を募集しています。
募集要項・福利厚生など、詳しくはDXO株式会社採用サイトをご覧ください。

カジュアル面談も募集中!

詳しくはこちら

関連記事

ボタン・リンクのサンプル集2

ボタン・リンクのサンプル集2

Webデザイン
スクロール時にコンテンツをふわっと表示するアニメーションのサンプル集

スクロール時にコンテンツをふわっと表示するアニメーションのサンプル集

Webデザイン

Category

Webデザイン
Webサイトアクション
ツイート

このエントリーをはてなブックマークに追加
page top
  • TOP
  • TOOLS
  • NOTES
  • CONTACT
willlab - ウィルラボ

「willlab ウィルラボ」では、
便利な開発ツールを公開しています。
無料でご利用いただけますので、
是非ご活用ください。

DXO株式会社 〒164-0012
東京都中野区本町2丁目46-1 中野坂上サンブライトツイン7階
  • コーポレートサイト
  • スタッフブログ
  • 採用サイト
  • Facebook

Copyright © DXO,Inc. All rights reserved.