有時候某些頁面需要按鈕來執行連結,一方面讓畫面活潑、一方面也比較美觀,那我們要如何新增按鈕呢?
請先打好您按鈕的文字,例如:聯絡我們,文字打好後選起來按下連結
選擇連結的進階,並到樣式表類別填入 hpbtn hpbtn2 後按下確定
看到了嗎?剛剛選起來的字就變成按鈕了,滑鼠移過去還會變色唷!
若上面那些指令執行後無反應,請您再執行下列此步驟
在您需修改的網頁頁面按下原始碼,進入原始碼頁面
於第一行空一格
貼上此style
<style type="text/css"> .hpbtn { border-radius: 3px; color: white; padding: 10px 20px; text-align: center; display: inline-block; font-size: 16px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; text-decoration: none; } .hpbtn1 { background-color: #f0ad4e; color: #fff; } .hpbtn1:hover { background-color: #ec971f; color: #fff; text-decoration: none; } .hpbtn2 { background-color: #5bc0de; color: #fff; } .hpbtn2:hover { background-color: #31b0d5; color: #fff; text-decoration: none; } </style>
貼完後再按一下原始碼回到原本頁面,剛剛的文字有沒有變成BUTTON呢?恭喜你完成新增BUTTON的步驟囉!
剛剛 hpbtn hpbtn2 是藍色按鈕,若改為 hpbtn hpbtn1 將會變成橘色按鈕
聯絡我們 hpbtn hpbtn2
聯絡我們 hpbtn hpbtn1
純方形按鈕樣式請填入 linebtn
<style type="text/css"> .linebtn { border-radius: 0px; padding: 10px 35px; text-align: center; display: inline-block; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; text-decoration: none; color:#fff; background:#111; border:1px solid #111; } .linebtn:hover { border:1px solid #111; background: #fff; color:#111; text-decoration: none; } </style>
若您覺得文字太小,可去更改 font-size: 文字大小px; 數字越大文字越大,數字越小文字越小,這邊給各位參考值 12px、14px、16px、18px、20px、22px、24px
顏色也可以自己做更改, background:#色碼; 這是控制按鈕顏色, color:#色碼; 則控制文字顏色
有看到 .hpbtn1:hover 、 .hpbtn2:hover 嗎?hover就代表滑鼠移過去時的顯示,所以hover下面的 background:#色碼; 和 color:#色碼; 則控制滑鼠移過去時顯示的按鈕背景色及文字顏色,也可自行做修改
#按鈕 #button #連結 #連結按鈕 #顏色 #修改 #文字 #網頁區塊 #表單 #查修網頁 #修改網頁
規格詳情歡迎觀看光速人軟體規格表