CSS 去掉按鈕默認樣式
CSS 在樣式設計中占有非常重要的地位，但對于按鈕的處理上，可能會遇到一些問題。默認情況下，按鈕會有一些預設的樣式，但有時我們需要去掉這些默認樣式，添加自定義樣式。那么，如何去掉按鈕默認樣式呢？
首先，我們需要知道按鈕的默認樣式，以及如何找到它們。使用開發者工具，可以輕松地找到按鈕的默認樣式，如下：
```html```
```css
button {
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #000;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: all 0.15s ease-in-out;
}
```
以上就是一個默認的按鈕樣式。接下來，我們可以通過覆蓋這些樣式來去掉默認樣式，添加自定義樣式。
代碼示例：
```css
button {
background-color: tomato;
border: none;
border-radius: 0;
color: #fff;
cursor: pointer;
font-size: 1.2rem;
padding: 1rem 2rem;
text-transform: uppercase;
transition: all 0.3s ease;
}
button:hover {
background-color: orange;
}
```
在上述代碼中，我們可以看到，我們去掉了原先的邊框，將背景顏色改為了紅色，并添加了一些自定義樣式。我們還為按鈕添加了一個懸停效果，當鼠標懸停在按鈕上時，按鈕的背景顏色會從紅色變為橙色。
最后，我們需要注意的是，按鈕的樣式因應用場景不同而有所差異，需要根據實際情況進行設置。但只要掌握了去掉默認樣式的方法，就可以通過 CSS 自由搭配出想要的按鈕樣式了。
上一篇css 圖 彩色變黑白
下一篇css 固定文字位置不變