Just a very simple microinteraction for a button. This is used in several places on the site. Simply add the class to the button or integrate the styles into an existing design. To use this in Gutenberg, you should create a button component.

.btn--action-arrow {
  inline-size:fit-content!important; /* for Gutenberg */
  &::after {
    content: ""; 
    display: inline-block;
    height: 1em;
    width: 0;
    background-color: var(--btn-text-color-hover);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M11 7L15 12L11 17'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    margin-inline-start: 0;
    opacity: 0;
    transform: translateX(-0.5em);
    overflow: hidden;
    transition:
      width 300ms ease-in-out,
      margin-inline-start 300ms ease-in-out,
      transform 300ms ease-in-out 120ms,
      opacity 200ms ease-in-out 120ms;
  }

  &:hover,
  &:focus-visible {
    &::after {
      width: 1em;
      margin-inline-start: 0.5em;
      transform: translateX(0);
      opacity: 1;
    }
  }
}