如何使用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次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告