将链接样式化为按钮

Question

我做了一个.btn实用程序类样式的button和a元素作为按钮，但a的仍然看起来很奇怪。

我试图让所有的按钮有相同的高度，这就是为什么我设置--button-heightCSS变量。我还在.btn-square类中使用它来确保正方形按钮(包含SVG的按钮)在高度和宽度上相等。我还用vertical-align: middle将svg居中。然而，后一种风格并不适用于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>

这是codepen。

Answer 1

将.btn类添加到此代码

vertical-align: middle;

Answer 2

我建议使用display: inline-flex而不是inline-block。然后，您可以使用align-items: center(横轴:垂直)和justify-content: center(主轴:水平)居中文本和SVG。

我从.btn-square>svg选择器中删除了vertical-align: middle，并将其移动到.btn-square和.btn-secondary选择器

*,
*::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-flex;
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;
vertical-align: middle;
}
.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);
align-items: center;
justify-content: center;  
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>