小編給大家分享一下html中button標簽的樣式如何設置,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
成都創新互聯網站建設公司一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務為基礎,以質量求生存,以技術求發展,成交一個客戶多一個朋友!專注中小微企業官網定制,網站制作、成都做網站,塑造企業網絡形象打造互聯網企業效應。
本篇文章主要的介紹了關于HTML button標簽的樣式設置,還有關于HTML button標簽的美化樣式介紹,接下來就讓我們一起來閱讀本篇文章吧
首先我們先介紹HTML中的button標簽的樣式設置:
普通按鈕設置:
把input元素的type屬性設置為“button”,可以創建普通按鈕。按鈕上顯示的文本是value屬性的值,如果沒有提供value屬性,則只創建一個空按鈕。如:
<input type="button" value="立即購買">

效果很明顯,這是默認普通按鈕的設置。
默認情況下,在普通按鈕上點擊,是沒有任何反應的。因此,需要為普通按鈕注冊事件,并手動編寫相應的處理函數。假如希望單擊上述按鈕時,提交表單,則要為按鈕注冊onClick 事件。如:
<form name="buy" action="form.html" method="post">
<button onClick="submitForm(buy)">立即購買</button>
</form>現在點擊按鈕,就會觸發onClick事件,并調用事件處理函數submitForm(buy),參數buy為待處理表單name屬性的值。如果希望點擊按鈕后提交表單,就可以在事件處理函數中調用form對象的submit()方法:
function submitForm(f) {
f.submit();
}這是一個默認情況的設置,現在我們來看看給html button標簽設置樣式:
給大家看一個完整的代碼實例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>創新互聯</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 class="div">Button</div>
</body>
</html>這個的效果如圖:

這個的效果是不是很明顯,比默認的時候好看多了,等到我們學到js的時候,我們還能用js的技術把這默認的按鈕設置的更加美觀。
看完了這篇文章,相信你對html中button標簽的樣式如何設置有了一定的了解,想了解更多相關知識,歡迎關注創新互聯行業資訊頻道,感謝各位的閱讀!
分享題目:html中button標簽的樣式如何設置
文章路徑:http://www.yijiale78.com/article10/ihdcgo.html
成都網站建設公司_創新互聯,為您提供品牌網站建設、網站內鏈、企業建站、搜索引擎優化、企業網站制作、網站改版
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯