蘋果風格的CSS按鈕樣式非常簡潔、美觀,被廣泛運用于網頁設計和移動應用中。以下是幾種常見的蘋果風格按鈕樣式:
/* 基礎樣式 */ .apple-btn { display: inline-block; padding: 0 15px; height: 32px; line-height: 32px; text-align: center; border-radius: 16px; background-color: #007aff; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* 懸停狀態樣式 */ .apple-btn:hover { background-color: #0066cc; } /* 按下狀態樣式 */ .apple-btn:active { box-shadow: none; transform: translateY(2px); } /* 禁用狀態樣式 */ .apple-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
以上代碼中,定義了.apple-btn類作為基礎樣式的選擇器,其包括了按鈕的一些基本屬性,如背景色、文字顏色、字體大小等。同時,還有:hover、:active和[disabled]三個狀態的樣式選擇器,分別控制按鈕被鼠標懸停、按下和禁用時的樣式效果。
使用這些樣式可以輕松創建蘋果風格的按鈕,并根據需求進行調整,使其更加適合不同的場景。