哪些標(biāo)簽可以制作html按鈕（圖文詳解）

2020-03-24 18:16:10

字體：大中小

供稿：網(wǎng)友

經(jīng)常寫頁面或者經(jīng)常瀏覽網(wǎng)站的人對按鈕一定不陌生，正在學(xué)習(xí)HTML和CSS的小伙伴，你會寫HTML按鈕代碼嗎？有哪些標(biāo)簽可以制作按鈕呢？這篇文章就結(jié)合實(shí)例給大家介紹制作html按鈕樣式的三種標(biāo)簽（方法），有一定的參考價(jià)值，感興趣的朋友可以看看。

制作按鈕需要有一定的HTML和CSS基礎(chǔ)，如有不清楚的同學(xué)可以參考PHP 的相關(guān)文章，或者訪問 HTML視頻教程，CSS視頻教程，希望可以幫助到你。

方法1：button標(biāo)簽

<button> 標(biāo)簽可以制作按鈕，在 <button> 元素內(nèi)部可以放置文本或圖片，且所有主流瀏覽器都支持button標(biāo)簽。

實(shí)例描述：用<button> 標(biāo)簽制作按鈕，將其字體顏色設(shè)置為白色，字體大小設(shè)置為20px，背景顏色設(shè)為綠色，當(dāng)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)小手，具體代碼如下：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   .button{border: none;background: green;padding: 15px 30px;font-size: 20px;color: white;cursor: pointer;}  </style> </head> <body>  <button class="button">button</button> </body></html>

效果如圖所示：

方法2：<a>標(biāo)簽

<a> 標(biāo)簽也可以制作按鈕，其本身就是超鏈接，當(dāng)鼠標(biāo)點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)頁面跳轉(zhuǎn)的效果。

實(shí)例描述：用a標(biāo)簽制作按鈕，將按鈕背景顏色設(shè)置為紅色，字體大小設(shè)為25px，用text-decoration: none去掉a標(biāo)簽自帶的下劃線，并用border-radius: 10px，讓按鈕呈現(xiàn)圓角效果，具體代碼如下：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   body{margin: 50px 100px;}   .a{text-decoration: none;padding: 20px 35px;background: red;font-size: 25px;border-radius: 10px;color: white;}  </style> </head> <body>  <a href="#" class="a">按鈕a</a> </body></html>

效果圖：

方法3：input標(biāo)簽

<input> 元素在 <form> 表單中使用，可以通過type 屬性，設(shè)置輸入數(shù)據(jù)的類型，當(dāng)設(shè)置type為submit時(shí)，表示提交按鈕，當(dāng)設(shè)置type為reset時(shí)，表示重置按鈕。

實(shí)例描述：用CSS對submit提交按鈕進(jìn)行美化，將背景顏色設(shè)置為粉紅色，字體顏色為黑色，字體大小為30px，并用border-radius: 20px設(shè)置圓角。對reset重置按鈕不進(jìn)行任何設(shè)置，具體代碼如下：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   .submit{border: none;padding: 30px 45px;background: pink;border-radius: 20px;font-size: 30px;}  </style> </head> <body>  <form action="" method="post">      <input type="submit" value="submit" class="submit"/><br>      <input type="reset" value="reset" class="reset"/>  </form> </body></html>

效果圖：