CSS: make <button> and <a> look identical-CodePudding

I'm making a button component for Svelte, and it outputs either a <button> element or an <a>, depending on if you give it an href or not. Everything basically works perfect, the buttons and the links all look the same in the different styles.. except for my round button style:

That last row is all <a> tags. REPL: https://svelte.dev/repl/756e88bc3a8f4150872f6af66a4a7e4a?version=3.50.1.

How can I get the buttons and links to look the same? Why the they even behave so extremely different?

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

  .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);
  }

  .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;
  }

<p><button type="button" >Default</button> <button type="button" >Outlined</button> <button type="button" >filled</button> <button type="button" >i</button></p> <p><button type="button"  disabled="">Default</button> <button type="button"  disabled="">Outlined</button> <button type="button"  disabled="">filled</button> <button type="button"  disabled="">i</button></p> <p><a href="#"  role="button" rel="noreferrer noopener">Default</a> <a href="#"  role="button" rel="noreferrer noopener">Outlined</a> <a href="#"  role="button" rel="noreferrer noopener">filled</a> <a href="#"  role="button" rel="noreferrer noopener">i</a></p>

CodePudding user response：

Adding some flex rules for alignment to the .round class could solve it:

display: inline-flex;
justify-content: center;
align-items: center;

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

.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: inline-flex;
  justify-content: center;
  align-items: 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;
}

<p>
  <button type="button" >Default</button>
  <button type="button" >Outlined</button>
  <button type="button" >filled</button>
  <button type="button" >i</button>
</p>

<p>
  <button type="button"  disabled="">Default</button>
  <button type="button"  disabled="">Outlined</button>
  <button type="button"  disabled="">filled</button>
  <button type="button"  disabled="">i</button>
</p>

<p>
  <a href="#"  role="button" rel="noreferrer noopener">Default</a>
  <a href="#"  role="button" rel="noreferrer noopener">Outlined</a>
  <a href="#"  role="button" rel="noreferrer noopener">filled</a>
  <a href="#"  role="button" rel="noreferrer noopener">i</a>
 </p>