Styling a link as a button-CodePudding

I made a .btn utility class to style button and a elements as buttons, but the a's still look weird.

I'm trying to get all the buttons to have the same height, which is why I set the --button-height CSS variable. I also use it in the .btn-square class to make sure that the squared buttons (the ones containing an SVG) are equal in height and width. I also center the SVGs with vertical-align: middle. Yet, the latter style didn't apply to the a elements, plus there's extra spacing around the a elements that I cannot explain.

*,
*::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 >submit</button>
<a >submit</a>
<button >
  <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 >
  <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>

here's the codepen.

CodePudding user response：

Add .btn class to this code

vertical-align: middle;

CodePudding user response：

I recommend to use display: inline-flex instead of inline-block. Then you can center the text and SVG with align-items: center (cross-axis: vertical) and justify-content: center (main-axis: horizontal).

I removed the vertical-align: middle from the .btn-square>svg selector and moved it to the selectors .btn-square and .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 >submit</button>
<a >submit</a>
<button >
  <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 >
  <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>