色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css美化頁面按鈕

林玟書2年前9瀏覽0評論

按鈕作為頁面交互的重要元素之一,優美的樣式能夠增強用戶的體驗感。在前端開發中,CSS是一種最常用的樣式語言,可以通過CSS來美化頁面的按鈕。

/* 設置按鈕樣式 */
.button {
font-size: 1rem;
font-weight: bold;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #f5f5f5;
padding: 5px 10px;
cursor: pointer;
}
/* 鼠標移過按鈕 */
.button:hover {
background-color: #ccc;
color: #fff;
}
/* 激活按鈕 */
.button:focus {
outline: none; /* 去掉默認邊框 */
box-shadow: 0 0 5px #ccc;
}
/* 禁用按鈕 */
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

以上代碼設置了四種按鈕狀態,普通狀態(默認)、鼠標移過、激活和禁用。在普通狀態下,按鈕有一定的邊框、圓角和背景色,并設置了字體大小、加粗和內邊距。在鼠標移過按鈕的情況下,按鈕的背景色和文本顏色會發生變化,從而提醒用戶該按鈕可以點擊。使用:focus偽類可以實現激活按鈕時的虛線框效果。最后一個按鈕狀態就是禁用狀態,這是當按鈕被禁用時,按鈕的透明度降低并添加not-allowed的鼠標指針。

總之,以上代碼給我們提供了一個快速和方便的方法來美化頁面上的按鈕。如果你想要更多的樣式和設計選項,可以在CSS樣式表中添加自己的類或ID,或者使用CSS框架如Bootstrap或Materialize。