html
<a>ボタンサンプル</a>
css
a { padding: 8px 16px; display: inline-block; background-color: rgb(204,255,204); }
表示例
↓
ボタンサンプル
これに、borderやbackground-imageなどをcssで指定すればボタン風になりますが、手抜きボタンの作成がテーマなのでそんなことはしません。
<a>を<button>で囲みます。
ポイントは<button>のpaddingを”0”にするところです。
また、<a>のbackground-colorを無しにするか、透過色にすることで<button>自体のマウスオーバーの効果が損なわれません。
良い感じで手が抜けますw
また、<a>のbackground-colorを無しにするか、透過色にすることで<button>自体のマウスオーバーの効果が損なわれません。
良い感じで手が抜けますw
html
<button><a>ボタンサンプル</a></button>
css
button { padding: 0; } a { padding: 8px 16px; display: inline-block; background-color: none; }
表示例
↓
ただ、重大な欠点があります。
それは、
「ブラウザによってボタンの形状が変わっていしまう!」
という点です。
ですので、私は<form>内でのリンクボタン等で使用しております。
0 件のコメント:
コメントを投稿