CSS是Cascading Style Sheets(層疊樣式表)的縮寫,用于控制網頁中的樣式。在這篇文章中,我們將討論如何使用CSS將按鈕加上樣式。
.button { background-color: #4CAF50; /* 按鈕背景顏色 */ border: none; /* 去除按鈕邊框 */ color: white; /* 文本顏色為白色 */ padding: 15px 32px; /* 按鈕內邊距 */ text-align: center; /* 文本居中 */ text-decoration: none; /* 去除下劃線 */ display: inline-block; /* 將按鈕改為塊級元素 */ font-size: 16px; /* 文本大小 */ margin: 4px 2px; /* 間距 */ cursor: pointer; /* 鼠標懸停時呈現手形 */ }
以上是一個基本的樣式代碼,可以應用于所有按鈕。我們可以將按鈕的類名設置為“.button”,并在HTML中將其應用于所有按鈕。
<button class="button">點擊我</button>
通過應用上述樣式,按鈕將呈現出基本的綠色背景,白色的文本,圓角的邊緣等。
除了以上基本樣式,我們還可以進行更多樣式的自定義。例如,我們可以在鼠標懸停時添加背景顏色的改變效果:
.button:hover { background-color: #3e8e41; }
通過以上樣式,當鼠標懸停在按鈕上時,其背景顏色會變為更深的綠色。
總之,可以說CSS的樣式定制是無限的,我們可以通過修改顏色,字體,大小,邊框等,來定制出各式各樣的按鈕。