按钮组美化 02
主页 中文 粤语 外语 纯音乐 其它
HTML代码：
<div class="button-group">
<a href="AAA" class="horizontal-link">主页</a>
<a href="AAA" class="horizontal-link">中文</a>
<a href="AAA" class="horizontal-link">粤语</a>
<a href="AAA" class="horizontal-link">外语</a>
<a href="AAA" class="horizontal-link">纯音乐</a>
<a href="AAA" class="horizontal-link">其它</a>
</div>
HTML代码：
<!-------------独立按钮组---------------->
<style>
a.horizontal-link {
display: flex;
justify-content: center;
flex: 1;
}
.button-group {
display: flex;
border: 1px solid #000; /* 给按钮组添加蓝色边框 */
border-radius: 5px; /* 添加圆角效果 */
box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.3);
【】margin-bottom: 10px; /* 为按钮组添加 10px 的底部外边距 */
}
.horizontal-link {
position: relative;
padding: 5px;
padding-top: 6px;
padding-left: 15px;
padding-right: 15px;
background-color: rgba(0, 0, 0, 0.5); /* 按钮组的背景 */
color: #03e9f4;    /*--- 按钮的文字颜色 --*/
font-size:16px;
text-decoration: none;
}
.horizontal-link:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1px;
height: 30%;
background-color: #03e9f4;    /*--- 按钮之间的分割线 --*/
}

.horizontal-link:hover {
color: #00FFFA;
text-shadow: 0 5px 10px #03e9f4, 0 5px 20px #03e9f4, 0 5px 30px #03e9f4; /* 添加鼠标悬停时外发光特效 */
}
</style>
<!-------------独立按钮组---------------->