CSS 按钮 - 菜鸟教程

CSS按钮样式

本章了解如何使用CSS设置按钮样式。

基本按钮样式

.button {
                  background-color: #4CAF50;
                  border: none;
                  color: white;
                  padding: 15px 32px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 16px;
                  margin: 4px 2px;
                  cursor: pointer;
                }

尝试一下

按钮颜色

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

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

尝试一下

按钮大小

使用该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; /* Green */
}
...

尝试一下

可悬停的按钮

:hover将鼠标移到按钮上时，使用选择器更改按钮的样式。提示：使用transition-duration属性确定“悬停”效果的速度：

.button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

尝试一下

阴影按钮

.button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

尝试一下

禁用按钮

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

尝试一下

按钮宽度

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

尝试一下

按钮组

删除边距并添加float:left到每个按钮以创建按钮组：

.button {
  float: left;
}

尝试一下

有界按钮组，使用border属性创建带边框的按钮组：

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

尝试一下

垂直按钮组，使用display:block而不是float:left将按钮分组在彼此之下，而不是并排：

.button {
  display: block;
}

尝试一下

图像上的按钮

.container .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            background-color: #f1f1f1;
            color: black;
            font-size: 16px;
            padding: 16px 30px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
        }

        .container .btn:hover {
            background-color: black;
            color: white;
        }

尝试一下

动画按钮

在悬停时添加箭头：

.button:hover span:after {
            opacity: 1;
            right: 0;
        }

尝试一下

在点击上添加“按下”效果：

.button:hover span:after {
            opacity: 1;
            right: 0;
        }

尝试一下

淡入淡出：

.button {
            background-color: #f4511e;
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            font-size: 16px;
            margin: 4px 2px;
            opacity: 0.6;
            transition: 0.3s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
        }

        .button:hover {opacity: 1}

尝试一下

点击添加“涟漪”效果：

.button:active:after {
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0s
        }

尝试一下