我创建了一个.btn实用程序类，将button和a元素样式化为按钮，但a的看起来仍然很奇怪。
我试图让所有的按钮都有相同的高度，这就是为什么我设置了--button-height CSS变量。我还在.btn-square类中使用它来确保方形按钮（包含SVG的元素）在高度和宽度上是相等的。我还将SVG放在vertical-align: middle的中心。然而，后一种样式不适用于a元素，另外，a元素周围有额外的间距，我无法解释。
*,
*::before,
*::after {
box-sizing: border-box;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
font-family: "Inter", sans-serif;
background-color: hsl(40deg, 22%, 8%);
}
.btn {
display: inline-block;
border-radius: 8px;
border-width: 2px;
border-style: solid;
border-color: hsl(40deg, 40%, 94%);
font-size: 1rem;
font-weight: 700;
--button-height: 2.25rem;
height: var(--button-height);
cursor: pointer;
}
.btn>svg {
width: 1.275rem;
height: 1.275rem;
}
.btn-primary {
color: hsl(40deg, 22%, 8%);
background-color: hsl(40deg, 40%, 94%);
}
.btn-primary>svg {
fill: hsl(40deg, 22%, 8%);
}
.btn-primary:hover {
background-color: hsl(38deg, 22%, 90%);
}
.btn-secondary {
color: hsl(40deg, 40%, 94%);
background-color: transparent;
}
.btn-secondary>svg {
fill: hsl(40deg, 40%, 94%);
}
.btn-secondary:hover {
color: hsl(38deg, 22%, 90%);
border-color: hsl(38deg, 22%, 90%);
}
.btn-secondary:hover>svg {
fill: hsl(38deg, 22%, 90%);
}
.btn-square {
padding: 0;
width: var(--button-height);
}
.btn-square>svg {
vertical-align: middle;
}
.btn-small {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.btn-medium {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.btn-large {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
}<button class="btn btn-primary btn-small mr-200">submit</button>
<a class="btn btn-secondary btn-small mr-200">submit</a>
<button class="btn btn-primary btn-square mr-200">
<svg width="96"
height="96"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_14_188)">
<path d="M44 80C44 82.2092 45.7908 84 48 84C50.2092 84 52 82.2092 52 80V52H80C82.2092 52 84 50.2092 84 48C84 45.7908 82.2092 44 80 44H52V16C52 13.7909 50.2092 12 48 12C45.7908 12 44 13.7909 44 16V44H16C13.7909 44 12 45.7908 12 48C12 50.2092 13.7909 52 16 52H44V80Z"/>
</g>
<defs>
<clipPath id="clip0_14_188">
<rect width="96" height="96" fill="white" />
</clipPath>
</defs>
</svg>
</button>
<a class="btn btn-secondary btn-square mr-200">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_14_188)">
<path d="M44 80C44 82.2092 45.7908 84 48 84C50.2092 84 52 82.2092 52 80V52H80C82.2092 52 84 50.2092 84 48C84 45.7908 82.2092 44 80 44H52V16C52 13.7909 50.2092 12 48 12C45.7908 12 44 13.7909 44 16V44H16C13.7909 44 12 45.7908 12 48C12 50.2092 13.7909 52 16 52H44V80Z"/>
</g>
<defs>
<clipPath id="clip0_14_188">
<rect width="96" height="96" fill="white" />
</clipPath>
</defs>
</svg>
</a>
3条答案
按热度按时间mrwjdhj31#
将.btn类添加到此代码中
r6hnlfcb2#
我建议使用
display: inline-flex而不是inline-block，然后您可以使用align-items: center将文本和SVG居中（横轴：垂直）和justify-content: center（主轴：水平方向）。我从
.btn-square>svg选择器中删除了vertical-align: middle，并将其移动到选择器.btn-square和.btn-secondary中sshcrbum3#
可以在标记中添加.btn-content类
它可能会起作用