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

NOTES

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

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

ツイート

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

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

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

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

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

輝くボタン

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

右に伸びるボタン

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

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

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

線が出現するボタン

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

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

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

振動するボタン

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

拡大するボタン

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

関連するサンプル集

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

Category

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

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

システム開発、Webサイト制作の
ご依頼はこちらから

CONTACT
page top
  • TOP
  • TOOLS
  • NOTES
  • CONTACT
willlab - ウィルラボ

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

株式会社ライズウィル 〒103-0013
東京都中央区日本橋人形町2-15-1 フジタ人形町ビル7F
TEL: 03-4590-3200
FAX: 03-4590-3201
  • コーポレートサイト
  • スタッフブログ
  • 採用サイト
  • Facebook

Copyright © Risewill,Inc. All rights reserved.