<button>Botón</button>
button {
  display: inline-block;
  padding: .5rem 1rem;
  background: #232946;
  color: #fff;
  border: solid .1rem #232946;
  
  @media (forced-colors: active) {
    forced-color-adjust: none;
    background: buttonface;
    color: buttontext;
    border-color: canvastext;

    &:hover {
      background: buttontext;
      color: buttonface;
    }
  }
  
  &:focus {
    outline: solid .2rem #d4284d;
    outline-offset: .2rem;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.