TILs, snippets—my digital code garden 🌱.

All notes 11ty a11y ai animation api backend cheatsheet cli computer-science cpp css cypress deno dev devops git golang graphql html interview javascript messaging networking node performance php python questions react rust services sql storybook svelte sveltekit testing typescript typography vscode

🔗Make a button element look like a link

https://piccalil.li/quick-tip/make-a-button-element-look-like-a-link/
css 
.link-button {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  color: currentColor;
  -webkit-appearance: none;
  text-decoration: underline;
}

ℹ️ It is worth noting that buttons cannot look exactly like an a element because browsers override the display property and force it to act like display: inline-block despite what you define. The one exception is display: contents but there are quite a few catches with that property; more alarmingly, that the element semantics are completely removed which is a nightmare for accessibility. Read more about it here: https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html