如何在单个Button标签内实现双圆形1€硬币样式（无需多div）

不需要额外嵌套div，用CSS伪元素就能在单个button标签内实现双圆形结构，完全满足你的Button组件需求，下面是具体实现方案：

核心思路 #

利用button的**伪元素（::before/::after）**创建第二个圆形，伪元素属于button元素的一部分，不会额外增加DOM节点，完美适配组件化需求。

完整实现代码 #

CSS #

.euro-coin-btn {
  /* 外层圆形：硬币外环 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8860b; /* 模拟欧元硬币外环金色 */
  border: none;
  position: relative;
  cursor: pointer;
}

.euro-coin-btn::before {
  /* 内层圆形：硬币中心 */
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #c0c0c0; /* 模拟欧元硬币中心银色 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中对齐 */
}

HTML #

<button type="button" class="euro-coin-btn"></button>

你的原代码失败原因 #

你给同一个button同时添加了.btnCircle1和.btnCircle2两个类，这两个类的width/height/background属性会互相覆盖（CSS优先级相同时，后声明的样式会覆盖前一个），最终只会显示一个圆形，自然无法呈现双环效果。

可选优化：贴近真实硬币样式 #

如果要还原更真实的1欧元硬币细节，可以添加以下调整：

.euro-coin-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8860b;
  border: 2px solid #8b7355; /* 模拟硬币边缘金属质感 */
  position: relative;
  cursor: pointer;
}

.euro-coin-btn::before {
  content: "€";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #c0c0c0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #333;
  border: 1px solid #a9a9a9;
}

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