生暖かく千葉ロッテマリーンズを見守るそんなblog

大分前に変えたんですが、野球ブログランキングへのリンクをcssと画像を使ってちょっと修正。

ま、普通のリンクでは面白くないので、以前ネットで見かけたwiiっぽいボタン風に。簡単に作り方をまとめておきますね。

１，画像を作る。

今回はpngで作成。gifでもいいんですが、背景の色を少しグラデーションさせたかったので。ブラウザがIE6の場合はグラデが効かないけど、いまどきIE6使ってる人もいないでしょうし。あのyahooすら対象ブラウザからIE6ははずれてるわけで。

ボタンの背景画像

拡大の図：半透明の白を外側に塗ってあります

２，CSSの作成

ソースコードを下に記述。

p.wii-btn a {
	/* 画像の設定と通常の背景色設定 */
    background: url("images/wii_buttons.png") no-repeat scroll center center #F4F4F4;
    border: medium none;
    color: #333333;
    display: block;
    font-size: 12px;
    padding: 6px 0;
    text-align: center;
    text-decoration: none;
    /* ボタン画像サイズ */
    width: 258px;
}

/* マウスオーバーしたときの色 水色 */
p.wii-btn a:hover {
  background-color: #1DA9EF;
  font-weight:bold;
}

/* クリックしたときの色 オレンジ */
p.wii-btn a:active {
  background-color: #EF911D;
}

３，HTMLソースの設定

あとはHTMLを設定して完成。

<p class="wii-btn"><a href="#">wiiっぽいボタンの完成だコノヤロー</a></p>

完成図

wiiっぽいボタンの完成だコノヤロー

というわけで、こんなカンジでございます。背景色変えたりボタンのサイズを変更してカスタマイズしてみてください。

千葉ロッテマリーンズブログランキング

↑ブログ村ランキング参加中…　クリックよろしゅうm(_ _)m

タグ: css, html, Photoshop, webデザイン