CSS 按钮

本文带您了解如何使用 CSS 设置按钮样式。

按钮颜色

使用 background-color 属性更改按钮的背景颜色：

.button1 {
  background-color: #4caf50; /* 绿色 */
}
.button2 {
  background-color: #008cba; /* 蓝色 */
}
.button3 {
  background-color: #f44336; /* 红色 */
}
.button4 {
  background-color: #e7e7e7; /* 灰色 */
  color: black;
}
.button5 {
  background-color: #555555; /* 黑色 */
}

按钮尺寸

使用 font-size 属性更改按钮的字体大小：

.button1 {
  font-size: 10px;
}
.button2 {
  font-size: 12px;
}
.button3 {
  font-size: 16px;
}
.button4 {
  font-size: 20px;
}
.button5 {
  font-size: 24px;
}

使用 padding 属性更改按钮的内边距：

.button1 {
  padding: 10px 24px;
}
.button2 {
  padding: 12px 28px;
}
.button3 {
  padding: 14px 40px;
}
.button4 {
  padding: 32px 16px;
}
.button5 {
  padding: 16px;
}

圆角按钮

使用 border-radius 属性为按钮添加圆角：

.button1 {
  border-radius: 2px;
}
.button2 {
  border-radius: 4px;
}
.button3 {
  border-radius: 8px;
}
.button4 {
  border-radius: 12px;
}
.button5 {
  border-radius: 50%;
}

按钮边框颜色

使用 border 属性为按钮添加彩色边框：

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4caf50; /* 绿色 */
}

鼠标悬停效果

当您将鼠标移到按钮上时，使用 :hover 选择器更改按钮的样式。

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4caf50; /* 绿色 */
  color: white;
}

!! 提示： 使用 transition-duration 属性设置样式过渡的时间。

带阴影的按钮

使用 box-shadow 属性为按钮添加阴影。

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

禁用按钮

使用 opacity 属性为按钮添加透明度创建禁用样式。

**提示：**您还可以通过 cursor: not-allowed; 为禁用按钮设置鼠标样式。

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

按钮宽度

默认情况下，按钮的宽度由其文本内容决定（与其内容一样宽），可以使用 width 属性设置按钮的宽度。

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}

按钮组

水平按钮组

删除每个按钮的外边距并添加 float:left 属性可以创建要给按钮组。

.button {
  float: left;
}

!! 记住清除浮动。

带边框的按钮组

使用 border 属性创建一个带边框的按钮组：

.button {
  float: left;
  border: 1px solid green;
}

垂直按钮组

将所有按钮设置为 display:block，则按钮就会垂直排列。

.button {
  display: block;
}