数据结构
网络
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 次浏览
广告