プレーンCSSでホバーイメージ付きのリンクを作成する方法

書かれた記事:
  • ウェブサイトのデザイン
  • 更新:Aug 02、2013

ホバーとは何ですか? 引用した定義 UWStout.edu:

「ホバー」は、あらゆる種類のリンク上にカーソルを置いたときに発生する効果です。 リンクは、色を変更したり、新しいグラフィックを表示したり、サウンドファイルを再生したりすることで、ホバーに応答するようにコーディングできます。

ホバー効果はウェブのユーザビリティを向上させ、ウェブ所有者がウェブトラフィックを指示するのに役立ちます。 あなたのウェブユーザが特別なリンクに特別な注意を払うようにしたい場合、魅力的なホバー効果を持つリンクを作成するのが良い方法です。 シンプルなホバー効果 このような (シンプルな下線とテキストの色の変更)は、それらのテキストが「クリック可能」であることを示し、Webインタラクションを改善します。 ただし、テキストの色とスタイル(下線/上線/太字)の変更は非常に基本的であり、ホバーを使用してさらに多くのことができます。

この記事では、ホバー効果のある見栄えの良いリンクを作成する方法を示します。

例1:ホバーボタンとリンク

最初に、実際の例を見てみましょう。(リンク上にマウスを置くと、それがどのように動作するかを見ることができます。

例1 - ホバーボタン画像付きのリンク

これは、この例で構築されるものの完成バージョンです。

私たちはそれをプレーンなCSSでどうやって作りますか?

ボタン画像

ステップ1では、わかるように、2つの異なるバージョンの矢印アイコンが必要です。 この例では、デフォルトのリンクボタンとして赤(#CC3300)を使用しました。 ホバー効果のグレー(#333333)。 このようなボタンは、どの画像編集ソフトウェアを使用しても簡単に作成できます。

赤い色のボタン(たとえばb1.png)と灰色(ボタンはb2.png)があります。 これらの2つを、b1.pngの上にb2.pngというイメージファイルにまとめます。 これがリンクの最終イメージになります。 名前を付けて(例えば、x.png)、希望の場所をアップロードしてください(私の場合はWPテンプレートフォルダに配置しました)。

ご参考に:

b1.png 、b2.png 、およびx.png

CSSコード

次に、CSSコードで。 基本的に私たちが達成したいのは、ボタンのスペースを作るためにリンクテキストを少しだけ右にインデントすることです。 同時に、リンクがホバー状態にあるときに異なる画像を表示する。 これらはかなり基本的なものですが、私たちはバックグラウンドの位置を少し変える必要があります。 トリックは元のリンクの画像の上部(赤いボタン)を表示することです。 マウスを動かすと背景画像が-11px(ウェブサイトによって異なる場合があります)の余白に置き換えられ、グレーのボタンが表示されます。

.xa {color:#cc3300; 左パディング:14px。 フォントの太さ:太字。 background-image:url(images / x.png); 背景位置:0 2px; background-repeat:繰り返しなし。 }
.xa:ホバー{色:#333333; 左パディング:14px。 フォントの太さ:太字。 background-image:url(images / x.png); 背景位置:0 -11px; background-repeat:繰り返しなし。 }

実装

このホバー効果を自慢するには、指定した領域にクラスxを挿入するだけです。 以下に、その方法の例を示します。

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com">ホームページ</a> </ p>

例2:ホバーの背景にリンクする

同じコンセプトで、リンクをクールに見せるための無限の方法があります。 ここに、わずかに異なる方法でホバー効果を使用してできることの別の例を示します。 繰り返しになりますが、完成版をご覧ください。

例2 - ホバーの背景のリンク

この例では、ユーザーが自分の上にマウスを置いたときに背景が変わる、ボタンのようなハイパーリンクを作成します。

私たちはそれをプレーンなCSSでどうやって作りますか?

背景画像

最初に、角丸長方形の2つの画像を作成します。 デモンストレーションのために、この例ではこれら2つのイメージをマージしません。 赤い(#CC3300)長方形にb1.pngという名前を付けます。 マルーン(#9F2800)の長方形をb2.pngとして。

CSSコード

次に、スタイルシートのコードを示します(この2番目の例では、クラスに「y」という名前を付けています)。

ay {width:280px; 高さ:42px; 色:#000000; パディング:10px; テキスト装飾:なし。 表示ブロック; フォントの太さ:太字。 background-image:url(images / b1.png); background-repeat:繰り返しなし。 }
ay:hover {width:280px; 高さ:42px; カラー:#FFFFFF。 パディング:10px; フォントの太さ:太字。 テキスト装飾:なし。 表示ブロック; background-image:url(images / b2.png); background-repeat:繰り返しなし。 }

実装

リンクを表示するには、クラス(y)をソースコードの<a href>タグに挿入します。 例:

<a href="http://www.webhostingsecretrevealed.com" class="y">ホームページ</a>

包み込む

この記事があなたに貴重な情報をもたらし、あなたの何人かが創造的な方法でCSSを使用するように促したことを願っています。 このガイドに追加する必要があると思われる他の点がある場合は、コメントセクションにアイデアを残してください。

その他のCSSチュートリアル

この投稿が好きなら、チェックアウトしてください CSS 3アニメーションをうまく活用する方法, CSS 3チュートリアルを読む必要があります2012、 と同様 これらのCSS 3テクニックを使用してサイトをクールにする.

ジェリーローについて

WebHostingSecretRevealed.net(WHSR)の創設者 - 100,000のユーザによって信頼され、使用されているホスティングレビュー。 15年以上のWebホスティング、アフィリエイトマーケティング、およびSEOの経験。 ProBlogger.net、Business.com、SocialMediaToday.comなどへの貢献者。