CSS中的button設置方式可以很靈活,下面讓我們來看幾種常見的設置方法。
1. 設置button樣式
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的基本樣式,包括背景色、邊框、文本顏色、內邊距等。
2. 設置button的hover效果
button:hover { background-color: #3e8e41; }
上述代碼設置了當鼠標滑過button時的背景色。
3. 設置button的active效果
button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }
上述代碼設置了當button被點擊時的效果,包括背景色、陰影和向下位移。
4. 設置button的禁用狀態
button:disabled { opacity: 0.6; cursor: not-allowed; }
上述代碼將button的不透明度設置為0.6,并將光標樣式設置為“不可用”。
以上就是CSS中設置button的一些基本方法,開發者可以根據自己的需求進行自由調整。
上一篇iis運行php慢
下一篇iis部署php網站