按钮组美化 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>