資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用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次瀏覽
廣告