css 实现苹果按钮切换效果图

CSS的基础知识已经掌握，如果你现在想要学习如何实现苹果按钮切换效果图，可以参考以下几个步骤。

.apple-button {
  display: inline-block;
  background-color: #f0f0f0;
  border: 1px solid #999;
  Box-shadow: 1px 1px 0 0 rgba(0,0.5);
  padding: 5px;
  cursor: pointer;
  transition-property: background-color,Box-shadow,color;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.apple-button:hover {
  background-color: #999;
  Box-shadow: 0 0 0 1px rgba(0,0.5),01px 1px 0 1px rgba(0,0.5);
  color: #fff;
}

第一步，给按钮添加默认样式。为了达到类似苹果按钮的效果，我们需要设置按钮的背景颜色、边框、阴影、内边距和光标样式。

第二步，添加鼠标悬停样式。当鼠标悬停在按钮上时，按钮的背景颜色、边框和阴影效果都会发生变化，文字颜色也会变为白色。

第三步，添加过渡效果。这个步骤是可选的，但是会让按钮切换效果更加平滑自然。在这个例子中，我们将背景颜色、阴影效果和文字颜色设置为过渡属性，持续时间为0.2秒，缓动函数为ease-out。