css 按钮

/* CSS 按钮样式示例 */

.button {
  /* 设置按钮的背景颜色 */
  background-color: #4CAF50;

  /* 设置按钮的文字颜色 */
  color: white;

  /* 设置按钮的边框样式，这里设置为无边框 */
  border: none;

  /* 设置按钮的内边距 */
  padding: 15px 32px;

  /* 设置按钮的文本大小 */
  font-size: 16px;

  /* 设置按钮的圆角 */
  border-radius: 8px;

  /* 设置按钮的鼠标悬停效果 */
  transition-duration: 0.4s;
}

.button:hover {
  /* 当鼠标悬停在按钮上时，改变背景颜色 */
  background-color: white;

  /* 当鼠标悬停在按钮上时，改变文字颜色 */
  color: black;

  /* 当鼠标悬停在按钮上时，添加阴影效果 */
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

解释说明：

• .button 类定义了一个基本的按钮样式，包括背景颜色、文字颜色、边框、内边距、字体大小和圆角。
• transition-duration 属性用于定义按钮在悬停时样式的过渡效果，使变化更加平滑。
• .button:hover 定义了当鼠标悬停在按钮上时的样式变化，比如背景颜色、文字颜色和阴影效果。