メディアブルデザインの制作書庫

MediableDesign - 制作書庫

ロールオーバーボタンを作る~画像無し


画像を使わずにロールオーバーを作る方法です。
ココではリストを用いた例を記述します。(コピペしてもOKです)

【HTML】
<ul>
<li><a href="#" target="_self">テストボタン1</a></li>
<li><a href="#" target="_self">テストボタン2</a></li>
<li><a href="#" target="_self">テストボタン3</a></li>
</ul>

【CSS】
ul {
margin : 0;
padding : 0;
}
ul li {
display : block;
background-color : #444444;
list-style-type : none;
margin-bottom : 5px;
}
ul li a{
color : #FFFFFF;
display : block;
padding : 8px;
text-decoration : none;
}
ul li a:hover{
color : #cccccc;
background-color : #333333;
text-decoration : none;
}


同じカテゴリの記事

ボックスのセンタリング

CSSを使った全体設定

borderプロパティ一括指定

ロールオーバーボタンを作る[画像編]

リンクテキストの設定

50,000円からのホームページ制作
月額10,000円からのホームページ更新・運営代行

powered by MediableDesign(メディアブルデザイン)
このウェブサイト上の文章、映像、写真などの著作物の全部、または一部を了承なく複製、使用することを禁じます。
COPYRIGHT © MediableDesign All Right Reserved.