資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法律學如何使用 CSS 建立一個“按鈕組”？
在網頁上，我們可以輕鬆建立按鈕組。我們會在按鈕組中為所有按鈕建立一個 div。它們將被設定為 display inline-block。而且，還會設定懸浮效果。
在網頁上建立一個按鈕組
在 div 中，使用 <button> 元素設定按鈕 −
<div class="btnGroup"> <button>Facebook</button> <button>Twitter</button> <button>LinkedIn</button> </div>
對按鈕組進行樣式設定
display 指示如何控制元素的佈局。在本例中，display 屬性的 inline-block 將元素顯示為內聯級塊容器，即按鈕。使用 box-shadow 屬性設定按鈕的陰影 −
.btnGroup{
display: inline-block;
font-size: 0;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
對按鈕進行樣式設定
使用 float 屬性左對齊各個按鈕 −
button{
float: left;
margin:0px;
border:none;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
}
懸浮效果
:hover 選擇器用於在各個懸浮時設定按鈕的樣式 −
button:hover{
background:rgb(48, 24, 134);
box-shadow: 5px 10px 18px rgb(41, 39, 173);
color:white;
}
示例
下面是使用 CSS 建立按鈕組的程式碼 −
<!DOCTYPE html>
<html>
<head>
<style>
.btnGroup{
display: inline-block;
font-size: 0;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button{
float: left;
margin:0px;
border:none;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
}
button:not(:last-child){
border-right: 2px solid rgb(6, 134, 49);
}
button:hover{
background:rgb(48, 24, 134);
box-shadow: 5px 10px 18px rgb(41, 39, 173);
color:white;
}
</style>
</head>
<body>
<h1>Button Group</h1>
<div class="btnGroup">
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
</div>
<p>Hover over the above button group to see hover effects</p>
</body>
</html>
更新時間： 17-Nov-2023
461 次瀏覽
廣告