蘋果按鈕是蘋果公司電子產(chǎn)品上常使用的按鈕樣式，下面我們通過純CSS來實(shí)現(xiàn)這一按鈕效果。

.apple-button {
padding: 12px 30px;
background-color: #ffffff;
color: #007aff;
border: 1px solid #007aff;
border-radius: 22px;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.apple-button:hover {
background-color: #007aff;
color: #ffffff;
}

解釋一下上面的CSS代碼：

• 首先定義了一個(gè)類名為"apple-button"的樣式
• padding屬性用于設(shè)置內(nèi)邊距，讓按鈕看起來更美觀
• background-color屬性設(shè)置背景顏色，這里設(shè)置為白色
• color屬性設(shè)置文字顏色，這里設(shè)置為藍(lán)色
• border屬性設(shè)置邊框，這里設(shè)置為1像素的藍(lán)色實(shí)線邊框
• border-radius屬性設(shè)置圓角，這里設(shè)置為22像素
• font-size屬性設(shè)置字體大小，這里設(shè)置為18像素
• font-weight屬性設(shè)置字體粗細(xì)，這里設(shè)置為粗體
• text-align屬性設(shè)置文字對齊方式，這里設(shè)置為居中
• text-decoration屬性設(shè)置文字下劃線，這里設(shè)置為none表示無下劃線
• display屬性設(shè)置元素的顯示方式，這里設(shè)置為inline-block
• transition屬性設(shè)置過渡效果，這里設(shè)置背景顏色和文字顏色過渡時(shí)間為0.2秒
• box-shadow屬性設(shè)置按鈕的陰影效果
• cursor屬性設(shè)置鼠標(biāo)指針的樣式，這里設(shè)置為指針手型
• 然后定義了一個(gè):hover偽類，當(dāng)鼠標(biāo)指針移動到按鈕上時(shí)，按鈕的背景顏色和文字顏色會有變化，從而提升用戶交互體驗(yàn)。

最后，在HTML代碼中添加一個(gè)類名為"apple-button"的按鈕元素即可實(shí)現(xiàn)蘋果按鈕的樣式效果。