按钮组美化 01
HTML代码:
<div class="custom-btn-group"> <a href="AAA" class="custom-btn">按钮1</a> <a href="AAA" class="custom-btn">按钮2</a> <a href="AAA" class="custom-btn">按钮3</a> </div>
CSS代码:
<style>
.custom-btn-group {
display: inline-block;
font-size: 0; /* 移除行内元素之间的空格 */
}
.custom-btn-group .custom-btn {
background-color: #49BEC4;
border: none;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 0;
cursor: pointer;
}
.custom-btn-group .custom-btn:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.custom-btn-group .custom-btn:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.custom-btn-group .custom-btn:not(:last-child) {
border-right: 1px solid #71D1D6; /* 添加按钮之间的分隔线 */
}
.custom-btn:hover
</style>