如何使用CSS样式化文本按钮？

顾名思义，文本按钮是带有文本的按钮。Bootstrap包含预定义的类，例如.btn-default，.btn-primary，.btn-success，.btn-info，.btn-warning等。但是，我们可以使用CSS创建按钮，而无需使用Bootstrap类。让我们看看如何使用HTML和CSS样式化文本按钮。

按钮

<button>元素用于设置用于信息、成功、警告和危险的不同按钮。这些是我们将使用CSS设置的不同按钮样式。

<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>

按钮样式

按钮的样式如下。对于按钮，光标属性设置为pointer。

button {
   border: none;
   border-radius: 7px;
   color: white;
   font-weight: bolder;
   padding: 15px;
   font-size: 18px;
   cursor: pointer;
}

成功按钮

成功按钮使用color属性设置不同的文本颜色。这样，悬停时背景颜色会改变，因为在:hover选择器下设置了不同的背景颜色。

.Success {
   color: #4caf50;
}
.Success:hover {
   background: #e7e7e7;
}

信息按钮

信息按钮使用color属性设置不同的文本颜色。这样，悬停时背景颜色会改变，因为在:hover选择器下设置了不同的背景颜色。

.Info {
   color: #2196f3;
}
.Info:hover {
   background: #e7e7e7;
}

危险按钮

危险按钮使用color属性设置不同的文本颜色。这样，悬停时背景颜色会改变，因为在:hover选择器下设置了不同的背景颜色。

.Danger {
   color: #f44336;
}
.Danger:hover {
   background: #e7e7e7;
}

警告按钮

警告按钮使用color属性设置不同的文本颜色。这样，悬停时背景颜色会改变，因为在:hover选择器下设置了不同的背景颜色。

.Warning {
   color: #ff9800;
}
.Warning:hover {
   background: #e7e7e7;
}

示例

以下是使用CSS样式化文本按钮的代码：

<!DOCTYPE html>
<html>
<head>
   <style>
      button {
         border: none;
         border-radius: 7px;
         color: white;
         font-weight: bolder;
         padding: 15px;
         font-size: 18px;
         cursor: pointer;
      }
      .Success {
         color: #4caf50;
      }
      .Success:hover {
         background: #e7e7e7;
      }
      .Info {
         color: #2196f3;
      }
      .Info:hover {
         background: #e7e7e7;
      }
      .Warning {
         color: #ff9800;
      }
      .Warning:hover {
         background: #e7e7e7;
      }
      .Danger {
         color: #f44336;
      }
      .Danger:hover {
         background: #e7e7e7;
      }
      .Default {
         color: black;
      }
      .Default:hover {
         background: #e7e7e7;
      }
   </style>
</head>
<body>
   <h1>Text Buttons Example</h1>
   <button class="Success">Success</button>
   <button class="Info">Info</button>
   <button class="Warning">Warning</button>
   <button class="Danger">Danger</button>
   <button class="Default">Default</button>
</body>
</html>

更新于：2023年12月21日

284次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告