[分享]css两个按钮设置

在前端开发中，设置按钮是实现网页交互的重要一环。在CSS中，我们可以使用伪类和样式属性来设置按钮的样式。下面介绍两个常用的CSS按钮设置方法。 .btn1 { backgroundcolor: 4CA...

在前端开发中，设置按钮是实现网页交互的重要一环。在CSS中，我们可以使用伪类和样式属性来设置按钮的样式。下面介绍两个常用的CSS按钮设置方法。

.btn-1 {
  background-color: #4CAF50; /* 按钮背景色 */
  border: none; /* 去掉边框 */
  color: white; /* 按钮字体颜色 */
  padding: 10px; /* 按钮内部边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 去掉文本装饰 */
  display: inline-block; /* inline属性保证按钮在同一行 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 按钮四周边距 */
  cursor: pointer; /* 鼠标悬停样式 */
  border-radius: 5px; /* 圆角边框 */
}

.btn-2 {
  background-color: white; /* 按钮背景色 */
  border: 2px solid #4CAF50; /* 细边框 */
  color: black; /* 按钮字体颜色 */
  padding: 10px; /* 按钮内部边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 去掉文本装饰 */
  display: inline-block; /* inline属性保证按钮在同一行 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 按钮四周边距 */
  cursor: pointer; /* 鼠标悬停样式 */
  border-radius: 5px; /* 圆角边框 */
}

.btn-2:hover { /* 鼠标悬浮样式 */
  background-color: #4CAF50;
  color: white;
} 

.btn-1是一个绿色的按钮，没有边框线，圆角边框和鼠标悬停样式。btn-2是一个白色的按钮，有细边框线，圆角边框和鼠标悬停样式。使用这两个按钮样式即可实现基本的CSS按钮设置。