CSS按钮样式

益清野

2023-12-01

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;
}

普通按钮

禁用的按钮

按钮宽度

默认情况下，按钮的宽度取决于文本的长短，但是可以使用属性width为其更改；

正常

250px

40%

100%

为按钮设置边框分组

button1button2button3…

以上是没有边框的按钮

button1button2button3…

这是只为右边设置边框的按钮

还可以设置float:left;属性和display:block;属性创建垂直的按钮栏；

button1 button2 button3

同时可以结合悬停样式创建更好的效果。

图像上的按钮

像是前面一个小节记录的，可以使用相同的方法创建位于图像上相应位置的按钮。与此同时需要注意，在div容器内需要设置position:relative;的属性，在按钮设置position:absolute;的属性，这样就可以避免后者设置位置时是根据整个html界面而非是div容器设置的。

动画按钮

可以根据伪类元素:after :hover 创建动画按钮；

可以参考这几个链接：

样式1 样式2 样式3 样式4