项目中使用css自定义按钮样式、悬浮和点击效果样式_自定义样式

项目中使用css自定义按钮样式、悬浮和点击效果样式

/* 按钮样式 */
.custom-button {
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 悬浮效果 */
.custom-button:hover {
  background-color: #0056b3;
}

/* 点击效果 */
.custom-button:active {
  background-color: #003080;
}

示例中，.custom-button 类定义了按钮的基本样式，包括宽度、高度、边框、边框半径、背景色、字体颜色和字体大小。.custom-button:hover 类定义了鼠标悬浮时按钮的样式，.custom-button:active 类定义了按钮被点击时的样式。

你可以根据你的设计需求自定义按钮的样式。可以调整按钮的宽度、高度、边框半径、背景色、文字颜色等属性来满足你的需求。同样，你也可以在悬浮和点击效果的类中定义其他样式属性，如改变边框样式、阴影效果等。

确保将这些样式应用于你的按钮元素，例如：

<button class="custom-button">按钮</button>

使用这些自定义样式类，你可以轻松地为你的按钮添加自定义样式、悬浮效果和点击效果。