Svelte按钮组件：解决<button>与<a>圆形样式不一致问题

问题描述 #

开发Svelte按钮组件时，根据是否传入href属性渲染<button>或<a>元素。目前除圆形按钮外，其他样式下二者表现一致，但圆形按钮的<button>与<a>样式差异明显。

差异原因 #

浏览器对<button>和<a>有不同的默认用户代理样式：

• <button>作为表单元素，默认带有浏览器内置的边框、内边距，且属于替换元素，内部文本的布局规则与<a>（行内替换元素）不同
• 即使设置了display: inline-block，<button>的默认line-height、vertical-align属性可能与<a>不一致，导致圆形按钮内的文本位置偏移
• 部分浏览器中<button>的box-sizing默认值可能与<a>不同，影响宽高计算

解决方法 #

通过重置统一两个元素的基础样式，消除默认差异：

1. 添加appearance: none清除按钮的默认系统外观
2. 统一line-height、vertical-align确保文本垂直居中
3. 明确设置text-align: center让圆形按钮内的文本居中
4. 重置按钮的默认边框和内边距（已在.btn中设置，但需确保优先级覆盖默认样式）

修改后的CSS代码 #

:root {
  --primary-hsl: 135deg 62% 48%;
  --primary: hsl(var(--primary-hsl));
  --s2: 0.5rem;
  --s4: 1rem;
}
    
.btn {
  background: none;
  padding: var(--s2) var(--s4);
  border-radius: var(--s2);
  color: var(--primary);
  display: inline-block;
  border: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 16px;
  font-family: sans-serif;
  /* 新增统一样式 */
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
}

.btn:hover {
  background: hsl(var(--primary-hsl) / 0.2);
  text-decoration: none;
}

.round {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  background: hsl(var(--primary-hsl) / 0.1);
  /* 确保圆形按钮内文本垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.outline {
  border: 1px solid var(--primary);
}

.filled {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
  color: white;
}

.filled:hover {
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) var(--primary);
}

.disabled,
.disabled:hover {
  color: #888;
  cursor: not-allowed;
  background: transparent;
}

.disabled.outline,
.disabled.outline:hover {
  border-color: #888;
}

.disabled.filled,
.disabled.filled:hover {
  background: #d7d7d7;
  color: #888;
}

对应的HTML结构 #

<p><button type="button" class="btn">Default</button> <button type="button" class="btn outline">Outlined</button> <button type="button" class="btn filled">filled</button> <button type="button" class="btn round">i</button></p>
<p><button type="button" class="btn disabled" disabled>Default</button> <button type="button" class="btn outline disabled" disabled>Outlined</button> <button type="button" class="btn filled disabled" disabled>filled</button> <button type="button" class="btn round disabled" disabled>i</button></p>
<p><a href="#" class="btn" role="button">Default</a> <a href="#" class="btn outline" role="button">Outlined</a> <a href="#" class="btn filled" role="button">filled</a> <a href="#" class="btn round" role="button">i</a></p>

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