資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 樣式化輪廓按鈕？
可以使用 CSS 樣式和輪廓設定來設定網頁上的按鈕樣式並使其更具吸引力。可以輕鬆更改文字和背景顏色。還可以更改預設大小。此外，可以使用 border-radius 屬性為形狀賦予圓角。讓我們看看如何使用 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 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 6px;
width: 140px;
}
成功按鈕
成功按鈕使用 background-color 屬性設定不同的背景顏色。文字顏色使用 color 屬性設定。這樣，顏色會在懸停時發生變化，因為在 :hover 選擇器下設定了不同的背景顏色：
.Success {
border:2px solid #4caf50;
color:#4caf50
}
.Success:hover {
background-color: #46a049;
color:white;
}
資訊按鈕
資訊按鈕使用 background-color 屬性設定不同的背景顏色。文字顏色使用 color 屬性設定。這樣，顏色會在懸停時發生變化，因為在 :hover 選擇器下設定了不同的背景顏色：
.Info {
border:2px solid #2196f3;
color:#2196f3;
}
.Info:hover {
background: #0b7dda;
color:white;
}
危險按鈕
危險按鈕使用 background-color 屬性設定不同的背景顏色。文字顏色使用 color 屬性設定。這樣，顏色會在懸停時發生變化，因為在 :hover 選擇器下設定了不同的背景顏色：
.Danger {
border:2px solid #f44336;
color:#f44336;
}
.Danger:hover {
background: #da190b;
color:white;
}
警告按鈕
警告按鈕使用 background-color 屬性設定不同的背景顏色。文字顏色使用 color 屬性設定。這樣，顏色會在懸停時發生變化，因為在 :hover 選擇器下設定了不同的背景顏色。
.Warning {
border:2px solid #ff9800;
color:#ff9800;
}
.Warning:hover {
background: #e68a00;
color:white;
}
示例
以下是使用 CSS 樣式化輪廓按鈕的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 6px;
width: 140px;
}
.Success {
border:2px solid #4caf50;
color:#4caf50
}
.Success:hover {
background-color: #46a049;
color:white;
}
.Info {
border:2px solid #2196f3;
color:#2196f3;
}
.Info:hover {
background: #0b7dda;
color:white;
}
.Warning {
border:2px solid #ff9800;
color:#ff9800;
}
.Warning:hover {
background: #e68a00;
color:white;
}
.Danger {
border:2px solid #f44336;
color:#f44336;
}
.Danger:hover {
background: #da190b;
color:white;
}
.Default {
border:2px solid #e7e7e7;
color: black;
}
.Default:hover {
background: #ddd;
}
</style>
</head>
<body>
<h1> 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
瀏覽量 3K+
廣告