.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  background-size: 400% 100%;
  background-image: linear-gradient(
    to right,
    transparent,
    transparent,
    var(--wp--preset--color--primary),
    var(--wp--preset--color--accent)
  );
}

.wp-block-button.is-style-outline
  .wp-block-button__link:not(.has-background):hover {
  border-color: var(--wp--preset--color--accent);
  background-position: 100% 0;
  color: var(--wp--preset--color--textonprimary) !important;
}