CSS3 Button美化是Web前端開發中比較常見和有趣的一個技巧,它可以讓頁面的按鈕看起來非常漂亮而且整潔!而且,CSS3 Button美化技巧可以通過CSS的一些特性來實現。比如說,我們可以使用偽類:hover、active、disabled等來定義各個不同狀態下的按鈕樣式。
.button{ cursor: pointer;//鼠標指針變為手形 display: inline-block;//讓外框適配里面的內容大小 padding: 12px 40px;//內邊距(上下、左右) font-size: 20px;//字體尺寸 color: #fff;//字體顏色 text-decoration: none;//去掉下劃線 background-color: #f00;//背景顏色 border: none;//去掉邊框 border-radius: 5px;//圓角半徑 } //鼠標移到button上時 .button:hover{ background-color: #0f0;//背景顏色變成綠色 } //鼠標按下 .button:active{ background-color: #00f;//背景顏色變成藍色 } //禁用 .button:disabled{ opacity: 0.5;//透明度變成50% cursor: default;//更改鼠標指針為默認樣式 }
在這里,我們根據需要,可以更改button的樣式,比如:修改背景顏色、修改圓角半徑等等。同時,給不同狀態設置不同的樣式,可以使按鈕顯得非常生動。