
首先我們先介紹HTML中的button標簽的樣式設置:
普通按鈕設置:
把input元素的type屬性設置為“button”,可以創(chuàng)建普通按鈕。按鈕上顯示的文本是value屬性的值,如果沒有提供value屬性,則只創(chuàng)建一個空按鈕。如:
input type= button value= 立即購買

效果很明顯,這是默認普通按鈕的設置。
默認情況下,在普通按鈕上點擊,是沒有任何反應的。因此,需要為普通按鈕注冊事件,并手動編寫相應的處理函數(shù)。假如希望單擊上述按鈕時,提交表單,則要為按鈕注冊onClick 事件。如:
form name= buy action= form.html method= post button quot;submitForm(buy) 立即購買 /button /form
現(xiàn)在點擊按鈕,就會觸發(fā)onClick事件,并調(diào)用事件處理函數(shù)submitForm(buy),參數(shù)buy為待處理表單name屬性的值。如果希望點擊按鈕后提交表單,就可以在事件處理函數(shù)中調(diào)用form對象的submit()方法:
function submitForm(f) { f.submit(); }這是一個默認情況的設置,現(xiàn)在我們來看看給html button標簽設置樣式:
給大家看一個完整的代碼實例:
!doctype html html head meta charset= utf-8 title PHP /title style .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px black; color:white; font-weight: bold;.div:active{ box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb; /style /head body div >這個的效果如圖:

這個的效果是不是很明顯,比默認的時候好看多了,等到我們學到js的時候,我們還能用js的技術把這默認的按鈕設置的更加美觀。
好了,以上就是關于html button標簽的樣式設置,還有美化樣式的總結(想學更多就來PHP ),有問題的可以在下方提問。
【小編推薦】
html下拉菜單怎么做?html下拉菜單的代碼實例介紹
html單選按鈕默認選中怎么做?input標簽的單選按鈕用法實例
以上就是html button標簽的樣式怎么設置?html button標簽的樣式介紹的詳細內(nèi)容,html教程
鄭重聲明:本文版權歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。
新聞熱點
疑難解答