『CSS 検索ボタンをかっこよく・・・』

ブログ画像一覧を見る

このブログをフォローする

CSS 検索ボタンをかっこよく・・・

前に　ＣＳＳ　検索窓をかわいく・・・　ボタン　をやりました

そのときに・・ボタンに画像を使う場合・・・って説明しましたが

詳しく説明してって～リクです

・・・じつは・・・前の記事で出来ますって書いておいて・・・

そのあと忘れたころに質問が来て「出来ません！」って断言してしまったんです　m(_ _)m

すみません・・・はじめに書いたように出来ます・・

で、・・・・　検索ボタンをかっこよく・・・

元のボタンのサイズが 38px × 20px ですので同じサイズで画像を作ります

サイズが大きいと検索窓の下にきたりする場合があります

38px × 20px

　　　　　　　　　　　　

　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　

面倒になってなんか同じのばかりになってしまいました・・・

みなさまはタイトルの通りカッコイイボタンをつくってください

自分で画像を作ったり・・上からコピーしたりして自分の画像フォルダにアップしてから

画像のとりかたは　画像のＵＲＬって・・・？

マウスオーバーは必要ないし・・・画像も１枚で充分ですって～方は・・

#search .searchbtn{
width:38px;/*画像の幅*/
height:20px;/*画像の縦*/
background:url(画像のＵＲＬ) no-repeat;
border:none;
text-indent:-9999px;
}

普段のボタン画像とマウスがのった時用の画像の２枚を使います

#search .searchbtn{
width:38px;/*画像の幅*/
height:20px;/*画像の縦*/
background:url(画像のＵＲＬ) no-repeat;
border:none;
text-indent:-9999px;
}
#search .searchbtn:hover{
background:url(マウスオーバー時の画像のＵＲＬ) no-repeat;
}

IE6は疑似クラス :hoverに対応していないため変化しません

次は１枚の画像でマウスオーバーまでやります・・・

こちらの方が先に画像が読み込まれていますので切替がスムーズです

上（普段の画像）と下（マウスがのったときの画像）同じサイズの画像をつなげて１枚の画像にします

38px × 40px

　　　　　　　　　　　　

#search .searchbtn{
width:38px;
height:20px;/* 画像の縦の1/2 */
background:url(画像のＵＲＬ) no-repeat;
background-position:0 0;
border:none;
text-indent:-9999px;
}
#search .searchbtn:hover{
background-position:0 -20px;
}

※このブログはこのタイプです