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