リンクボタンを作っちゃっるき - CSSめも

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_linkbutton.html

なんじゃらほい

ありきたり、というか誰もが作りたがる（オレモナー）やつかもしれません（オレモカー）。

リンクを立体的なボタンするきに、なお話（そのままやき！）。

こういうのを

• family affair
• あなたにもul,ol
• What's Position
• 恐怖の四角関係
• pre要素はママの味

こういう風にするわけー

高さが微妙に違うのでもうちょっと微調整が必要かも。（汗）

立体的にするには

基本は、border-top と border-left を明るく、border-right と border-bottom を暗い色にする。凹ますにはその逆。

つまり、a:link で 凸にして、a:hover で凹にするというわけでんな。

ブロックレベル要素にしちゃうのだ

上記の方法だけだと幅が文字数に左右されるんで、同じ大きさのボタンにするには a要素を diplay:block にしてブロック要素にしちゃうというわけ。

とりあえず、こんなかんじ。

div.menu {
margin: 0 0 1% 5%;
padding: 0;
width: 40%;
border: 1px outset #ccc;
float: left;
line:height: 1.5;
}

.menu ul {
margin: 1em;
padding: 0;
list-style-type: none;
}

.menu li {
margin: 0;
padding: 0;
font-size: 1.2em;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #fff #333 #333 #fff;
}

.menu li a {
margin: 1px 0;
padding: 0.2em 0.5em;
color: #009;
background-color: #ccc;
display: block;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: #fff #333 #333 #fff;
}

.menu li a:visited {
color: #010;
background-color: #ccc;
}

.menu li a:hover {
color: #003;
background-color: #ffd;
border-style: solid;
border-width: 1px;
border-color: #333 #fff #fff #333;
}

.menu li a:active {
color: #003;
background-color: #ff9;
border-style: solid;
border-width: 1px;
border-color: #333 #fff #fff #333;
}

.menu li.thispage {
margin: 3px 0;
padding: 0.2em 0.5em;
color: #003;
background-color: #ffe;
border-style: solid;
border-width: 1px;
border-color: #fff #333 #333 #fff;
text-decoration: underline;
font-weight: bold;
line:height: 1.5;
}

横に並べる

• ご案内
• about
• プロダクト
• お問合せ
• 会社紹介
• blog

a要素にclass属性を付けてみます。

.topmenu {
margin: auto;
padding: 10px 0;
clear: both;
width: 700px;
}

.topmenu ul {
margin: auto;
padding: 0;
width: 690px;
list-style-type: none;
font-size: 0.9em;
}

.topmenu li {
margin: 0;
padding: 0;
color: #fff;
background-color: #1841CE;
text-align: center;
float:left;
font-weight: bold;
}

.topmenu2 {
margin: 1px;
padding: 1em 0;
display: block;
line-height: 5;
border-width: 1px;
border-color: #1841CE #000 #000 #1841CE;
border-style: solid;
width: 100px;
float:left;
}

.topmenu a:link, .topmenu a:visited {
margin: 1px;
padding: 0.2em;
color: #ffe;
background-color: #1841CE;
}

.topmenu a:hover {
text-decoration: none;
color: #1841CE;
background-color: #ffe;
border-width: 1px;
border-color: #000 #fff #fff #000;
border-style: solid;
}

.topmenu a:active {
text-decoration: underline;
}

.topmenu li.thispage {
margin: 1px;
padding: 0.2em;
color: #1841CE;
background-color: #ffe;
display: block;
line-height: 5;
width: 100px;
border-width: 1px;
border-color: #1841CE #000 #1841CE #fff;
border-style: solid;
}

備考

説明する能力・気力がありません...orz

最終更新日：2008.6.20

• ←
• H
• ↑
• ↓