首頁 >web前端 >html教學 >哪些標籤可以製作html按鈕（圖詳解）

哪些標籤可以製作html按鈕（圖詳解）

yulia原創: 2018-10-26 15:14:5910519瀏覽

經常寫頁面或經常瀏覽網站的人對按鈕一定不陌生，正在學習HTML和CSS的小夥伴，你會寫HTML按鈕程式碼嗎？有哪些標籤可以製作按鈕呢？這篇文章就結合實例來跟大家介紹製作html按鈕樣式的三種標籤（方法），有一定的參考價值，有興趣的朋友可以看看。

製作按鈕需要有一定的HTML和CSS基礎，如有不清楚的同學可以參考PHP中文網的相關文章，或者訪問HTML視頻教程，CSS視頻教程，希望可以幫助到你。

方法1：button標籤

實例描述：以

<!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>

效果如圖所示：

哪些標籤可以製作html按鈕（圖詳解）

方法2：標籤

實例描述：用a標籤製作按鈕，將按鈕背景顏色設定為紅色，字體大小設為25px，用text-decoration: none去掉a標籤自帶的底線，並用border-radius: 10px，讓按鈕呈現圓角效果，具體程式碼如下：

<!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標籤

元素在

實例描述：用CSS對submit提交按鈕進行美化，將背景顏色設定為粉紅色，字體顏色為黑色，字體大小為30px，並以border-radius: 20px設定圓角。對reset重置按鈕不進行任何設置，具體程式碼如下：

<!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>

效果圖：

哪些標籤可以製作html按鈕（圖詳解）

##總結：製作html按鈕有三種方法，一種是button標籤，一種是a標籤，一種input標籤，（input標籤又分為兩種，submit提交按鈕，reset重置按鈕），具體選擇什麼標籤，看個人習慣和工作需要啦。

以上給大家介紹了有哪些標籤可以製作按鈕，初學者一定要自己動手嘗試，看看能不能製作做更加好看的按鈕，希望這篇文章對你有幫助！更多相關教學請造訪

HTML5完整版手冊
#

以上是哪些標籤可以製作html按鈕（圖詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：caption標籤什麼意思使用方法介紹（附程式碼）下一篇：caption標籤什麼意思使用方法介紹（附程式碼）

看更多