CSS3中的按鈕效果圖是網(wǎng)頁設(shè)計(jì)中常用的一種元素,通過CSS3的樣式規(guī)則,可以輕松地實(shí)現(xiàn)多種不同的按鈕效果。
/* 普通按鈕 */ .button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; text-align: center; text-decoration: none; font-size: 16px; } /* 懸浮效果 */ .button:hover { background-color: #0069d9; } /* 激活效果 */ .button:active { background-color: #0053b3; } /* 禁用效果 */ .button.disabled { background-color: #9c9c9c; cursor: not-allowed; } /* 改變大小 */ .button.small { font-size: 12px; padding: 5px 10px; } .button.large { font-size: 20px; padding: 15px 30px; } /* 不同顏色 */ .button.primary { background-color: #007bff; } .button.secondary { background-color: #6c757d; color: #fff; } .button.success { background-color: #28a745; color: #fff; } .button.danger { background-color: #dc3545; color: #fff; } .button.warning { background-color: #ffc107; color: #fff; }
除以上代碼外,CSS3還提供了很多其他的按鈕效果,如動態(tài)變化的顏色、漸變色、邊框陰影等,可以根據(jù)需要自由組合、定制。使用CSS3按鈕效果,能讓網(wǎng)頁看上去更加美觀、美觀和易用。