CSS圓角按鈕樣式讓網站看起來更美觀且親切,下面是一些實例代碼:
/* 基礎樣式 */ .button { display: inline-block; padding: 10px 20px; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; color: #fff; background-color: #007bff; border-radius: 10px; cursor: pointer; } /* hover效果 */ .button:hover { background-color: #0062cc; } /* active效果 */ .button:active { background-color: #005cbf; } /* disabled狀態 */ .button:disabled { opacity: 0.5; cursor: not-allowed; } /* 不同尺寸的按鈕 */ .button-small { padding: 5px 10px; font-size: 14px; border-radius: 8px; } .button-large { padding: 15px 30px; font-size: 20px; border-radius: 12px; } /* 高亮按鈕 */ .button-highlight { background-color: #f5a623; } /* 深色按鈕 */ .button-secondary { background-color: #444444; }
以上樣式代碼可以根據需要進行修改,比如更改顏色、尺寸、圓角大小等,可以大程度地滿足網站設計的需求。