Button outline primary color with arrow animation

Button outline primary color with arrow animation

selector .wp-block-boldblocks-svg-block__inner {
  --ac: var(--bb--text--color, var(--wp--preset--color--primary, #9DFF20));  
  --hc: var(--bb-attr--hover-color, var(--bb--background--color, var(--wp--preset--color--base, #ffffff)));
  --td: var(--bb-attr--transition-duration, .25s);

  padding: var(--bb--padding-top--sm, .75rem) var(--bb--padding-right--sm, 1rem) var(--bb--padding-bottom--sm, .75rem) var(--bb--padding-left--sm, 1rem);
  color: var(--ac);
  background-color: var(--bb--background--color, var(--wp--preset--color--transparent, transparent));
  border: var(--bb--border--sm, 1px solid var(--ac));
  border-color: var(--ac) !important;
  border-radius: var(--bb--border-radius--sm, .5rem);
  transition: all var(--td);
}
selector .wp-block-boldblocks-svg-block__inner:hover {
  color: var(--hc);
  background-color: var(--ac);
}
selector svg {
  transition: transform var(--td);
  transform: translateX(0);
}
selector:hover svg {
  transform: translateX(4px);
}
selector path:last-child {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset var(--td);
}
selector:hover path:last-child {
  stroke-dashoffset: 20;
}