在線按鈕是一種常見的網站元素,用于引導用戶進入不同的頁面或操作。一個好的按鈕應該具有清晰的形狀、明確的文本和易于使用的背景。本文將介紹在線按鈕的 CSS 樣式,包括按鈕的形狀、顏色、文本和背景。
1. 按鈕的形狀
按鈕的形狀可以通過 CSS 選擇器進行定義。可以使用各種形狀,如圓形、方形、三角形、橢圓形等。以下是一些常用的形狀選擇器:
```css
button, input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 2px;
cursor: pointer;
button:hover, input[type="submit]:hover {
background-color: #3e8e41;
2. 按鈕的顏色
按鈕的顏色可以通過 CSS 選擇器進行定義。可以使用各種顏色,如紅色、綠色、藍色、黃色等。以下是一些常用的顏色選擇器:
```css
button, input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 2px;
cursor: pointer;
button:hover, input[type="submit]:hover {
background-color: #3e8e41;
3. 按鈕的文本
按鈕的文本可以通過 CSS 選擇器進行定義。可以使用各種文本,如“提交”、“返回”、“關閉”等。以下是一些常用的文本選擇器:
```css
button, input[type="submit"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
button:hover, input[type="submit]:hover {
font-family: Arial, sans-serif;
font-size: 14px;
color: #3e8e41;
4. 按鈕的背景
按鈕的背景可以通過 CSS 選擇器進行定義。可以使用各種背景,如白色、黑色、藍色等。以下是一些常用的背景選擇器:
```css
button, input[type="submit"] {
background-color: #fff;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 2px;
button:hover, input[type="submit]:hover {
background-color: #007bff;
以上就是關于在線按鈕的 CSS 樣式的介紹,通過這些樣式的定義,可以設計出清晰、美觀、易用的在線按鈕。