圓角 CSS 按鈕樣式已成為現代頁面設計的一部分,因為它們能夠增強頁面的美觀性和用戶體驗的同時,使用戶更容易進行操作。下面我們將簡單介紹一些實現圓角 CSS 按鈕樣式的方法。
/* 使用 border-radius 屬性設置圓角 */ button { border-radius: 10px; } /* 指定每個角的半徑,使它們可以有不同的圓角 */ button { border-radius: 10px 5px 0 20px; } /* 可以使用簡寫形式 */ button { border-radius: 5px 10px; } /* 使用 box-shadow 屬性添加按鈕陰影效果 */ button { border-radius: 10px; box-shadow: 2px 2px 2px #888888; } /* 添加 hover 和 active 效果 */ button:hover { background-color: #ff0000; } button:active { background-color: #00ff00; }
通過上述方法,我們可以輕松地為按鈕添加圓角和陰影效果,以及 hover 和 active 效果,實現更加美觀和易用的按鈕。