0

リンクボタンの作り方

Posted by Koumei on 2012年9月12日 in HTML/CSS, webプログラミング, インターネット |

 先日の続きである。

 aタグだけでリンクボタンを作るのだが、まあよくある作り方ではある。
 背景をCSSで切り替えているだけなのだ。
 
 実際に見てもらおう。

Type 1
Type 2
Type 3

 
 初期状態では、一段暗い色にしていて、カーソルが入る(hover)と明るい色になる。
 以前は逆にしていたのだが、どちらがいいかは趣味によるだろう。
 明るくなった方が分かり易いように思って変更したが、どうだろうか。
 (暗い色にすると、逆になるが)

 
 通常はただのボタン画像を貼るが、このボタンは透過画像を貼ってある。
 上のボタンが背景と同じ色に見えるのは、背景を透過しているからだ。
 もし、下に写真などがあれば、その画像を透過してボタンが表示される。
 サンプルはここの画面右下

 逆に、ボタン自体に背景色を指定すると、ボタン毎に色が変えられる。
 上のボタンをクリックすると、カラーピッカーが開くので、色を選ぶとボタンの色が変わる。
 
 
 記述例
 
 aタグの記述

<a href="リンク先" title="タイトル" class="linkbtn" style="background-color:ボタン背景色、指定しなければ透過;" >表示するテキスト</a>

 
 CSSの記述

a.linkbtn{
	width:278px;
	height:32px;
	padding-left: 10px;
	line-height:32px;
	color:black;
	display:block;
	text-decoration: none;
	background-image: url(通常時の画像);
	background-repeat: no-repeat;
}

a:hover.linkbtn{
	color:red;
	background-image: url(ホバー時の画像);
}

 
 ボタン画像をいくつも用意するのではなく、背景色を指定するだけなので簡単に色が変えられて便利だと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

キャプチャ *

Copyright © 2009-2018 Koumei Soft 開発ログ All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.