CSS是前端開發者必備的技能,其設置樣式的方法十分豐富。今天我們討論的是如何通過CSS,為按鈕設置點擊之后的樣式。
button:active{ background-color: #0070C9; color:white; }
上述代碼中,我們使用了一種偽類選擇器:active,該偽類會在用戶鼠標點擊按鈕的時候被觸發。我們通過該偽類來設置按鈕被點擊時的樣式。在這個例子中,我們將按鈕背景色設置為藍色,文本顏色設置為白色。你還可以通過其他CSS屬性來設置按鈕的樣式,比如字體大小、形狀等等。
除了使用偽類選擇器,我們也可以使用JavaScript來實現按鈕樣式的改變。具體實現方法如下:
var button = document.getElementById('my-button'); button.onclick = function(){ this.style.backgroundColor = '#0070C9'; this.style.color = 'white'; }
這段代碼中,我們首先通過document.getElementById()函數獲取了一個Id為“my-button”的按鈕,然后為該按鈕添加了一個onclick事件,當用戶點擊按鈕時,就會運行我們定義的函數,該函數通過this.style來修改按鈕的樣式。
總之,通過CSS或JavaScript,我們都可以非常方便地為網頁中的按鈕添加點擊事件,并添加對應的樣式。這對于網頁開發來說是個很實用的技能。
上一篇css指定文本修改顏色
下一篇css標簽dd和dt