如何用CSS制作含两行不同样式文本的全域可点击圆形按钮

问题说明 #

已实现圆形按钮样式，但无法为第二行文本设置独立样式，需求为：按钮包含两行样式不同的文本，且整个按钮区域均可点击。

初始代码 #

初始CSS代码 #

.drs-button{
  min-width: 240px;
  max-width: 240px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: black;
  font-size: 4em;
  background-color: #ffffff;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding:0;
}
.drs-button:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}

.drs-button:active{
  background-color: #2980b9;
}

HTML代码 #

<button class="drs-button">
  <span class="txt-line1">DRS</span>
  <span class="txt-line2">15 Secs</span>
</button>

补充尝试代码 #

body {
  background-color: navy;
}

.drs-button{
  min-width: 240px;
  max-width: 240px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: black;
  font-size: 4em;
  background-color: #ffffff;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding:0;
}
.drs-button:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}

.drs-button:active{
  background-color: #2980b9;
}

span {
  display: inline-block;
  vertical-align:middle;
}

<button class="drs-button">
  <span class="txt-line1">DRS</span>
  <span class="txt-line2">15 Secs</span>
</button>

目标效果参考图：

解决方案 #

要实现两行文本独立样式，同时保证按钮区域可点击，只需针对两个span类分别设置样式，并调整按钮内部布局方式，让文本垂直居中且换行显示：

修改后的完整代码 #

body {
  background-color: navy;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.drs-button{
  width: 240px;
  height: 240px;
  border: none;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-decoration: none;
  outline: none;
}

.drs-button:active{
  background-color: #2980b9;
}

/* 第一行文本样式 */
.txt-line1 {
  font-size: 4em;
  color: black;
  font-weight: bold;
  line-height: 1;
}

/* 第二行文本样式 */
.txt-line2 {
  font-size: 1.5em;
  color: #666;
  margin-top: 8px;
}

<button class="drs-button">
  <span class="txt-line1">DRS</span>
  <span class="txt-line2">15 Secs</span>
</button>

关键调整说明 #

• 改用flex布局实现按钮内部文本的垂直居中，替代原:before伪元素方案，布局更直观，同时自然实现两行文本换行。
• 给.txt-line1和.txt-line2分别设置独立的字体大小、颜色、间距等样式，满足差异化视觉需求。
• 按钮设置固定宽高240px，保证圆形比例精准，避免内容影响按钮形状。
• 整个<button>标签包裹所有内容，天然保证整个区域可点击，无需额外处理。

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