CSS按钮样式

_南明_离火_

9581人浏览 · 2022-07-01 11:19:18

_南明_离火_ · 2022-07-01 11:19:18 发布

CSS按钮

同样的CSS样式无法显示请参考链接：

链接入口

利用CSS可以为按钮设置属性：

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

示例：

<button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输入按钮">

按钮

链接按钮

按钮颜色

利用background-color属性可以为按钮改变颜色搭配合适的字体颜色会有更好的效果：

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

绿色蓝色红色灰色黑色黑色

按钮尺寸

通过使用属性padding和属性font-size改变字体内边距和字体大小来改变按钮的大小。

首先看字体大小的影响：

12px24px2em

再来试试内边距的影响：

12px24px2em

12px 24px24px 2em2em 12px

把字体和内边距合起来：

12px字体 12px内边距24px 24px2em 2em

圆角按钮

使用border-radius属性可以为按钮设置圆角；

button{
    border: 2px inset cyan;
    border-radius:12px;/*50%;*/
    background-color:balck;
    color:cyan;
    padding:12px;
}

12px

50%

多色边框

红色黄色蓝色绿色

多样按钮

button{
    background-color: black;
    color:cyan;
    border-width:5px;
    border-style:inset outset solid groove;
    border-color:red yellow blue green;
    border-radius:12px;
    padding:12px;
}

悬停边框

button {
  transition: 0.4s;
}

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

效果显示如下：

阴影按钮

通过属性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为按钮创建禁用的光标形式。

button{
    background-color: black;
    color:cyan;
    border-width:5px;
    border-style:inset outset solid groove;
    border-color:red yellow blue green;
    border-radius:12px;
    padding:12px;
}
.button1{
    cursor:pointer;
}
.button2{
    cursor:not-allowed;
    opacity:0.6;
}