以前に追記を表示したり非表示にしたりするようにしました。
一応スタイルシートで見た目をボタンっぽくしていたのですが、クリックしてもへこまないので少し違和感がありました。
そこで、クリックしたときの見た目をスタイルシートで指定することにしました。
このエントリーで実際にボタンを使ってみます。(IE6では対応していない模様)
クリックする前のスタイルシート
p.extended {
color: black;
background-color: #cccccc;
text-align: center;
margin-top: 10px;
border-width: 1px;
border-style: solid;
border-color: white #999999 #999999 white;
padding: 0px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;
width: 5em;
cursor: pointer;
}
クリック後のスタイルシート
p.extended:active {
border-color: #999999 white white #999999;
}
「:active」というのがクリックをしたときのスタイルを決めるものです。デザイン的にはボーダーの色を左・上と右・下とを切り替えているだけなんですけども。
ついでに書いておくと、タグクラウドページのボタンも同じようにしてみました。
| パーマリンク
