<h1 class="title">fun with outline-offset</h1>
<div class="content">
  <a href="#" class="btn btn-1">Click me</a>
  <a href="#" class="btn btn-2">Click me</a>
  <button class="btn btn-3">Click me</button>
  <button class="btn btn-4">Click me</button>
</div>

:root {
  --ff-primary: basic-sans, sans-serif;
  --clr-primary: #ee6352;
  --clr-body: #333;
  --clr-bg: #ddd;
  --spacer: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, p {
  margin: 0;
}

.flow > * + * {
  margin-top: var(--flow-space, var(--spacer));
}

body {
  font-family: var(--ff-primary);
  min-height: 100vh;
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--clr-body);
  background: var(--clr-bg);
}

a {
  color: var(--clr-primary);
}

.content {
  width: min(70vw, 50rem);
  margin: 3rem auto;
  padding: 3em;
  box-shadow: 0 0 3em rgba(0,0,0,.15);
  background: white;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  place-items: center;
}

.title {
  font-weight: 900;
  color: var(--clr-primary);
  line-height: .8;
  text-align: center;
  margin: 4rem;
}

.btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: inherit;
  border: 0;
  line-height: 1;
  background: none;
  padding: .75em 1.5em;
}

.btn-1 {
  --clr: #386397;
  --outline: 2px solid var(--clr);
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

.btn-1:hover,
.btn-1:focus {
  outline: var(--outline);
  outline-offset: 2px;
  // because of normalize
}

.btn-2 {
  --clr: #AD325E;
  --outline: 2px solid var(--clr);
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

.btn-2:hover,
.btn-2:focus {
  outline: var(--outline);
  outline-offset: -6px;
  // because of normalize
}

.btn-3 {
  --clr: #5559AB;
  --outline: 2px solid white;
  border: 2px solid var(--clr);
  background: var(--clr);
  color: white;
  outline: var(--outline);
  transition: outline-offset 200ms ease;
}

.btn-3:hover,
.btn-3:focus {

  outline: var(--outline);
  outline-offset: -6px;
  // because of normalize
}


.btn-4 {
  --clr: rgb(156, 17, 255);
  --outline: 2px solid rgb(156, 17, 255);
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-width 200ms ease, outline-offset 200ms ease;
}

.btn-4:hover,
.btn-4:focus {
  outline: var(--outline);
  outline-width: 8px;
  outline-offset: -8px;
  // because of normalize
}