.button {
  display: inline-block; /* 使链接显示为块级元素 */
  padding: 10px 20px; /* 设置内边距 */
  font-size: 16px; /* 设置字体大小 */
  color: #fff; /* 设置文字颜色 */
  background-color: #007BFF; /* 设置背景颜色 */
  border: none; /* 移除边框 */
  border-radius: 5px; /* 设置圆角 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 移除下划线 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: background-color 0.3s; /* 平滑过渡背景颜色变化 */
}

.button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变背景颜色 */
}

响应式设计

为了确保按钮在不同设备上都能良好显示，我们可以使用媒体查询来调整按钮的样式：

@media (max-width: 768px) {
  .button {
    padding: 8px 16px; /* 在小屏幕上减小内边距 */
    font-size: 14px; /* 减小字体大小 */
  }
}

按钮的交互效果

为了增强用户体验，我们可以为按钮添加一些交互效果，比如点击时的阴影效果：

.button:active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

总结

进一步探索

• 考虑使用JavaScript来增强按钮的交互性，比如添加点击事件处理。
• 探索更多CSS属性，如box-shadow、transition等，以实现更丰富的视觉效果。
• 学习如何使用CSS框架（如Bootstrap）来快速实现按钮样式。