↑これは画像です。
はじめまして！cat@logのcocoです。
stylesheet-stylebook.com用のCSSボタン、作りました。
一部には好評のようですが、もちろんネタ元あり！です。こんな複雑なもの、ゼロからなんてとても作れません。別々のページにしてあるので、ソースを見て使ってください（まぁ、なんと不親切な！！）。
ボタンA：このサイトの一番下に貼っていただいている、マウスオーバーすると黒くなるボタンです。
このサイトに貼っていただくと、右側が赤い背景の上に赤い文字になってしまいますね。何かとバッティングしているんでしょう。
この辺がCSSの難しいところですね。
こちらに、このボタンの詳しい解説があります。
ボタンB：こちらは、マウスオーバーするとペコっと凹むボタンです。
こちらに、このボタンの詳しい解説があります。
はじめまして！
こちらのエントリ、参考になりました。
しかしながら、IEでは最適化されている様子ですが、OperaやMozilla等で閲覧すると結構見た目が違うのですよね。
標準化、これもCSSの課題でしょうか。
OperaやMozillaで表示が違うのは、単にCSSの書き方が悪いだけだと思うのですが、しかしそれはそれとしても、CSSは常に継承やDOMなどの影響を受けていますから、CSS buttonのボックス範囲だけ、スタイルがまったく素の状態であるという前提はありません。したがって、たとえば
a { font-style:italic; }
strong { font-size:large; }
というようなスタイルを既に宣言しているサイトのリソースにおいて、ボタンAのコードをそのまま貼り付けても、意図した外観にはなりません。
バナー画像で訴えるタイプのように、img要素による一定の書き方をフォーマットを、単にソース内に貼り付けるだけで、少なくともその画像そのものによる視覚的な外観は変わらないということをCSSで実現するためには、まず対象範囲のボックス内のスタイルをすべてデフォルトに戻す必要があります。また、他のスタイル定義とバッティングしないよう、優先度を高める必要もあるでしょう。
下記URLにサンプルを用意しました。たとえば、このような感じに書くのであれば、これは比較的「貼り付け」のみで行えるフォーマットとして使えるのではないかと思います。
http://altba.com/yuu/blog/samples/cssbtn.html
* WinIE5.5, WinIE6, Mozilla1.5, Opera7.2 で確認しています。他のブラウザ環境向けにOptimizeしきってないことをご了承ください。
ただし、もちろんこれであっても、既存のリソースにcssbtnというIDが無いという保証はありませんから、その場合はIDを変更しなければなりません。
はじめまして。
もともとのリンク文字色(a:link, a:visited)が効いたままになっているようですので、それを上書きするような指定が必要になります。取り敢えずの対処としては、/css/pages.css の末尾4行分を
.cssbtn:link,
.cssbtn:visited { background:#D11D35; color:white }
.cssbtn:hover { background:black; color:white }
.cssbtn:hover strong { background:#ccc; color:black; }
とすればよいかと思います。
※ :hoverを後に持ってきた理由については、下記ページを参照下さい。
http://www.mozilla.gr.jp/standards/webtips0012.html
なお、（yuuさんのサンプルでもそのようになっていますが、）ボタンをひとつだけつけるのであれば、a要素のclass属性はcssbtnだけでもよいと思います(<a class="cssbtn" href="...">)。
Good Point. Anyways, this was where i met her. You can join for free as well www.redtricircle.com
Excellent, that was really well explained and helpful
Online Casinos: Casino Vegas Red
