【html】按鈕應用

在網頁中也是不可或缺的一份子

繼上一篇【html】文字各式效果

這次要講解的是按鈕

 

1.一般按鈕

 

語法:<input type="button" value="文字">

 

解說:不附含超連結、圖片及任何設定的按鈕，寬高皆由文字大小自動設置，紅色字部分請自行更改。

範例:

 

2.超連結按鈕

 

語法:<input type="button" value="文字" onclick="欲連結到的網址'">

 

解說:帶有超連結的按鈕，寬高皆由文字大小自動設置，紅色字部分請自行更改。

範例:

 

3.圖片按鈕

 

語法:<button><img src= "圖片網址"></button>

 

解說:帶有圖片的按鈕，寬高皆由文字大小自動設置，紅色字部分請自行更改。

 

範例:

 

4.超連結圖片按鈕

 

語法:<button onclick="self.location.href='欲連結到的網址'"><img src= "圖片網址"></button>

 

解說:帶有圖片的超連結按鈕，寬高皆由文字大小自動設置，紅色字部分請自行更改。

範例:

 

 

5.自訂寬高及文字大小、顏色的一般按鈕

 

語法:<input type="button" value="文字";" style="font-size:1pt; width:1px;height:1px";color:#000000>

 

解說:可自訂寬高及文字大小的一般按鈕，【font-size:1pt】為文字大小，【width:1px】為按鈕的寬，【height:1px】按鈕的高，【color:#000000】為文字的顏色，紅色字部分請自行更改。

 

範例:

 

6.自訂寬高及文字大小、顏色的超連結按鈕

 

語法:<input type="button" value="文字";onclick="欲連結到的網址";" style="font-size:1pt; width:1px;height:1px;color:#000000">

 

解說:可自訂寬高及文字大小的超連結按鈕，【font-size:1pt】為文字大小，【width:1px】為按鈕的寬，【height:1px】按鈕的高，【color:#000000】為文字的顏色，紅色字部分請自行更改。

 

範例:

 

7.自訂寬高的圖片按鈕

 

語法:<button "style="width:1px;height:1px">
<img src= "圖片網址"></button>

 

解說:可自訂寬高的圖片按鈕，【width:1px】為按鈕的寬，【height:1px】按鈕的高，紅色字部分請自行更改。

 

範例:

 

8.自訂寬高的圖片超連結按鈕

 

語法:<button onclick="self.location.href='欲連結到的網址';"style=width:1px;height:1px">
<img src= "圖片網址"></button>

 

解說:可自訂寬高的圖片按鈕，【width:1px】為按鈕的寬，【height:1px】按鈕的高，紅色字部分請自行更改。

 

範例: