HTMLのコントロールボタンは、デフォルトでは下のようなデザインです。

自分のWebサイトに馴染むデザインに変えたいという場合など、スタイルシートを使って、デザインを変えてみましょう。
（「button」の部分をクリックしてみてください。画像ではなく、ボタンだということが分かるはずです）

■CSSオンリー

一般的に、ボタンの枠線と背景色を変えると雰囲気が変わります。

平面的バージョン：

.btn {
border: 1px #003366 solid;
background-color: #99ccff;
}

立体的バージョン：

.btn {
border-top: 1px #ffccee solid;
border-right: 1px #663300 solid;
border-bottom: 1px #663300 solid;
border-left: 1px #ffccee solid;
background-color: #ff6600;
color: white;
font-weight: bold;
}

■CSS＋画像

もっと画像に似せたい場合は画像を使います。

平面的バージョン：

.btn {
background: url(img/button1.gif) repeat-x;
height: 25px;
border: none;
}

→高さは決まってしまいますが、ボタンに表示するテキスト（value="button"のbuttonの部分）の文字数を気にせず使えます。

立体的バージョン：

.btn {
background-image: url(img/button2.gif);
height: 25px;
width: 100px;
border: none;
}

→より画像らしくなりました。しかし、テキストの文字数に合わせて、画像を複数個作る必要があります。

---

＜＜ボタンのデザインを変える際の注意点＞＞

コントロールボタンは「ウィンドウが開く」「選択できる」という風に、何らかのアクションを引き起こすためのオブジェクトです。
なので、あまりにも周りの風景に溶け込みすぎて、どこをクリックしたら良いのか戸惑ってしまうようなデザインは避けるべきでしょう。