画像を使わずにそれっぽく見せる方法

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;
}

表示例）