如何用CSS重现图示样式的双独立按钮布局？

HTML 结构 #

用 <a> 标签制作可跳转按钮，利用其原生链接属性实现跳转功能：

<div class="button-group">
  <a href="/target-page-1" class="rounded-btn">按钮1</a>
  <a href="/target-page-2" class="rounded-btn">按钮2</a>
</div>

CSS 样式 #

根据图示的圆角按钮形态，设置对应样式来匹配视觉效果：

/* 按钮容器：控制按钮摆放位置与间距 */
.button-group {
  display: flex;
  gap: 15px; /* 按钮间的空隙，可根据图示调整 */
  justify-content: center; /* 水平居中，对齐图示的摆放位置 */
  padding: 20px 0;
}

/* 按钮核心样式 */
.rounded-btn {
  padding: 9px 22px; /* 内边距控制按钮尺寸，贴合图示大小 */
  background-color: #2196F3; /* 示例蓝色，可替换为图示实际颜色 */
  color: #fff;
  text-decoration: none; /* 去除链接默认下划线 */
  border-radius: 22px; /* 圆角值，实现圆润的按钮形状 */
  font-size: 15px;
  font-weight: 500;
}

/* 可选：鼠标悬停的交互效果 */
.rounded-btn:hover {
  background-color: #1976D2;
}

自定义调整提示 #

• 若图示按钮不是水平居中，可修改 .button-group 的 justify-content 属性，比如 flex-start（左对齐）、flex-end（右对齐），或用 margin 调整容器整体位置。
• 圆角大小、内边距、颜色都可根据图示的具体视觉细节微调数值。
• 如需固定按钮宽度，可给 .rounded-btn 添加 width: 110px; text-align: center; 属性。

内容的提问来源于stack exchange，提问作者drafty