按钮样式 CSS

CSS（层叠样式表）提供了一种简单且灵活的方法来控制网页上各种元素的样式，包括按钮。按钮是网站和应用程序中最常见的 UI 元素之一，因此必须仔细考虑其样式和外观。

按钮简介

按钮是网页和应用程序中一个简单而重要的 UI 元素，用于触发操作、完成交互和链接其他页面。通过选择正确的样式和动画，可以改善按钮的可用性和易用性。

在 CSS 中，可以使用基本的样式属性来定义按钮的样式、尺寸、边框和背景。还可以使用伪类和伪元素（如:hover和:before）来创建悬停效果、图标和其他视觉效果。

基本样式

最基本的按钮样式包括背景颜色、字体大小和字体颜色。下面的代码展示了如何使一个按钮具有这些基本属性。

button {
  background-color: blue;
  color: white;
  font-size: 1.2rem;
}

以上代码应当以CSS标识，效果见下图：

悬停效果

悬停时，按钮通常会更改颜色或添加其他视觉效果，以使其更具吸引力。下面的代码演示了如何在鼠标悬停时将按钮颜色更改为红色。

button:hover {
  background-color: red;
}

以上代码应当以CSS标识，效果见下动图：

无边框和圆角

可以通过添加边框、圆角和其他边框属性来改善按钮的外观。下面的代码演示了如何创建一个无边框且圆角的按钮。

button {
  background-color: white;
  color: black;
  border: none;
  border-radius: 15px;
}

以上代码应当以CSS标识，效果见下图：

渐变和阴影

渐变和阴影不仅可以使按钮更具吸引力，还可以在视觉上增加按钮的深度。下面的代码演示了如何在鼠标悬停时给按钮添加渐变和阴影效果。

button {
  background: linear-gradient(to right, #c850c0, #ffcc70);
  color: white;
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

button:hover {
  background: linear-gradient(to right, #ffcc70, #c850c0);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

以上代码应当以CSS标识，效果见下动图：

通过场景改变按钮样式

根据不同的场景和需要，可以根据 CSS 代码的需要改变按钮的样式。对于旅游预订网站请看以下静态效果：

button {
  background-color: #00A6FF;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 15px;
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

button:hover {
  background-color: #00C6FF;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

button:active {
  background-color: #005D8D;
  box-shadow: none;
}

以上代码应当以CSS标识，效果见下图：

总结

通过上述示例可以看到，按钮样式可以灵活使用并根据场景改变。值得注意的是，按钮样式应该明确和醒目，同时遵循统一的风格，以优化用户体验并提高网站和应用程序的易用性。