如何給按鈕(button)設置樣式？

在web開發中，按鈕是一個常用的控件，原生的按鈕是沒有樣式的，比較醜。那麼怎麼給按鈕設置樣式呢？本文盤點了幾種方式供大家參考！

操作方法

（01）首先創建一個txt文件，修改後綴名：把改為，用記事本打開添加如下代碼：打開瀏覽器，這是一個沒有添加樣式的button，外觀不美觀，而且在不同的瀏覽器下顯示的外觀是不一樣的，所以我們要添加統一的樣式！

（02）CSS：style屬性設置。如下代碼所示：按鈕的樣式是不是好看多了，在其他瀏覽器也會一樣的顯示這個效果。注：如果按鈕樣式比較少、樣式只對該按鈕有效，那麼就可以用style屬性。如下圖代碼所示，該按鈕樣式比較多，這樣寫讓代碼不整潔，可閲讀性差，那麼怎麼解決這個問題呢，這就要用style標籤了！

（03）CSS：<style type="text/css"></style>樣式表。如下代碼所示：style標籤裏面表示的是一個樣式表，我們所有的樣式都可以寫到標籤中去。這段代碼的意思是：凡是button標籤都使用這個樣式。注：如果希望這個頁面所有的按鈕(button)都使用這個

（04）CSS：<style type="text/css"></style>樣式表 加 class屬性。如下代碼所示：注意看到代碼的變化，我們把 樣式表中的  button{}改成了_button{}，然後在button標籤裏面加了class屬性，這樣做的意思是，這個button標籤使用了名字為ui_button的樣式。注：這是開發中比較常用的添加樣式的方式，我們可以對需要添加樣式的按鈕指定一個樣式。

（05）JS：通過javascript動態修改樣式。如下代碼所示：很多適合我們需要動態的改變樣式，比如用户提交個人信息的適合，為了避免用户多次點擊提交按鈕重複提交信息，我們可以在用户點擊提交按鈕之後，禁用按鈕，並設置按鈕字體的顏色為灰色。

（06）JS：修改樣式的其他方法：ext = "color:#E1E1E1;background-color:black;";cssText可以寫多個樣式樣式屬性。如下面代碼：

（07）JS：修改樣式的其他方法：ttribute("class", "style2");直接更改按鈕標籤的class屬性，把指向名為ui_button的樣式改為指向名為style2的樣式。如下面代碼：

（08）JS：修改樣式的其他方法：<link href="" rel="stylesheet" type="text/css" id="css"/>ttribute("href","");修改引用外部的樣式表文件，這樣就可以對整個頁面的樣式進行全部更新！如下面代碼：