将链接样式化为按钮答案

【问题标题】：Styling a link as a button将链接样式化为按钮
【发布时间】：2022-12-29 20:56:50
【问题描述】：

我创建了一个 .btn 实用程序类，将 button 和 a 元素设置为按钮样式，但 a 看起来仍然很奇怪。下面是 HTML 和 CSS，以及here's the codepen。

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <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>
  </body>
</html>

CSS：

*,
*::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;
}

【问题讨论】：

标签： html css button

【解决方案1】：

我只是删除

height: var(--button-height);

来自 .btn 的行，它看起来好多了。

【讨论】：

也许吧，但我希望所有按钮都具有相同的高度。