CSS中制作立體按鈕是通過利用邊框樣式和顏色的變化來展現(xiàn)立體感。以下是制作立體按鈕的代碼:
.btn { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; border: 2px solid #2E8B57; border-radius: 5px; box-shadow: 0px 3px 0px #2E8B57; } .btn:hover { background-color: #3E8E41; border: 2px solid #288E27; box-shadow: 0px 3px 0px #288E27; }
首先,我們創(chuàng)建了一個class名為.btn的按鈕。通過設(shè)置display屬性為inline-block,按鈕會在父元素中占據(jù)一定的空間,同時保留了塊元素的特性。接著,我們設(shè)置了按鈕的padding、background-color和color屬性。padding用于控制按鈕的內(nèi)邊距大小,background-color控制按鈕背景顏色,color控制按鈕文本顏色。
接著,我們設(shè)置按鈕的邊框樣式和顏色。設(shè)置border屬性控制按鈕邊框的寬度和樣式,同時設(shè)置了邊框顏色為#2E8B57。設(shè)置border-radius屬性可以讓按鈕的角變得圓滑。同時,我們設(shè)置了box-shadow屬性來制作立體感。第一個參數(shù)是水平偏移量,第二個參數(shù)是垂直偏移量,第三個參數(shù)是模糊半徑,最后一個參數(shù)是陰影顏色。
在.btn:hover偽類中,我們設(shè)置了按鈕在鼠標(biāo)懸停時的樣式,通過改變background-color、border和box-shadow屬性的值來營造出立體感。
通過以上的代碼,我們可以很容易地制作出一個具有立體感的按鈕。
下一篇or 索引oracle