上一节:
下一节:

  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
        }
    尝试一下
上一节:
下一节: