画像を使わずにそれっぽく見せる方法
HTML
<div id="sample_button_wrapper">
<div id="sample_button_body">
<a href="#">Sample Button</a>
</div>
</div>
CSS
div#sample_button_wrapper {
border-radius: 7px;
background: #f5f5f5;
border: 1px solid #ccc;
display: inline-block;
padding-bottom: 3px;
box-shadow: 0 2px 3px #ccc;
}
div#sample_button_body {
background: #fff;
border-radius: 7px;
}
div#sample_button_body a {
color: #333;
text-decoration: none;
display: block;
padding: 8px 15px 5px 15px;
}
表示例)
色を付けたパターン
HTML
<div id="sample_button_wrapper2">
<div id="sample_button_body2">
<a href="#">Sample Button 2</a>
</div>
</div>
CSS
div#sample_button_wrapper2 {
border-radius: 7px;
background: #006699;
display: inline-block;
padding-bottom: 5px;
box-shadow: 0 2px 3px #999;
}
div#sample_button_body2 {
background: #0099cc;
border-radius: 7px;
}
div#sample_button_body2 a {
color: #fff;
text-decoration: none;
display: block;
padding: 8px 15px 4px 15px;
}
表示例)