手抜きボタン作成 【HTML / CSS】

まず、<a>にdisplay:inline-blockを指定します。

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

html

<button><a>ボタンサンプル</a></button>

css

button {
   padding: 0;
}
a {
   padding: 8px 16px;
   display: inline-block;
   background-color: none;
}

表示例
↓

ただ、重大な欠点があります。

それは、

「ブラウザによってボタンの形状が変わっていしまう！」

という点です。

ですので、私は<form>内でのリンクボタン等で使用しております。