html中的button默認樣式..不太能看，如果調一調背景色和字體的話也挺適合簡潔的頁面設計
於是決定配合JS，用html中的div完成button
最終結果圖：
html代碼：（first_passer.png是“過路人”字樣的背景透明圖片）
<div class="button" id="button3"><img id="button3_img" src="images/first_passer.png"></div>
（命名可以任意）
css代碼：
margin-top: 20%;
height: 12%;/*長寬應該要按照自己的代碼設置，此處外層有嵌套，所以用百分比*/
width: 100%;
border-radius: 10px;
border: 1px solid black;
text-align: center;
background:rgba(255, 251, 240, 0.3); /*R G B opacity*/
JS實現的功能：鼠標覆蓋時0.5透明度，離開時0.3透明度，並且讀取瀏覽器寬高，自適應設置div長寬，設置div中圖片高度與div相同，寬度auto。
$("button3_img").style.height = screen.availHeight * 0.70 * 0.7 * 0.12 + "px";
$("button3_img").style.width = "auto";
因為div的高度也是根據screen.availHeight的百分比來設置的，所以此處可用screen.availHeight * 0.70 * 0.7 * 0.12表示div高。
下面的JS代碼時用來設置鼠標指向和離開button時，背景透明度的變化：
$("button3").onmouseover = passerby_move;
$("button3").onmouseout = passerby_out;
function passerby_out() {
$("button3").style.background = "rgba(255, 251, 240, 0.3)";
}
function passerby_move() {
$("button3").style.background = "rgba(255, 251, 240, 0.5)";
}
PS：差點忘了，此處的$是自己設置的，不是jQuery，代碼如下：
$=function (id) {
return document.getElementById(id);
}