<button class="button-1">
  Block Borders
</button>

<button class="button-2">
  Inline Borders
</button>

.button-1 {
  border-block: 1vmin solid hotpink;
}

.button-2 {
  border-inline: 1vmin solid hotpink;
}

button {
  padding-inline: 2ch;
  padding-block: 1ex;
  font-size: clamp(2rem, 8vmin, 10vmax);
  color: deeppink;
  background: white;
  border-radius: 1vmin;
  border: none;
  outline-color: hotpink;
  outline-offset: 10px;
  box-shadow: 0 15px 50px -20px hsl(328 100% 54% / 50%);
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  padding: 2ch;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: max(5vmin, 7vmax);
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  background: hsl(200 20% 98%);
  color: hsl(200 30% 25%);
}