<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia laboriosam sequi unde consequuntur, possimus similique cupiditate in inventore. Libero id eum cum. Quia, quod doloremque? Placeat ducimus pariatur sequi quo!</p>
<button>Botón normal</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia laboriosam sequi unde consequuntur, possimus similique cupiditate in inventore. Libero id eum cum. Quia, quod doloremque? Placeat ducimus pariatur sequi quo!</p>
<button class="especial">Botón con :focus-visible</button>

.especial:focus:not(:focus-visible) {
  outline: 0;
}



button {
  margin: 0 0 1rem;
  color: #fff;
  background-color: #1D65B3;
  border: none;
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  border-radius: 0.25em;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

button:hover {
  background-color: #124890;
}

body {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  padding: 2rem;
}