Выполнить css после перехода

Question

Джентльмен, надеюсь, вы можете пролить мне свет на это - код ниже - кнопка на пользовательском компоненте карты, она должна появиться при наведении курсора мыши и показать текст. На самом деле происходит то, что при наведении курсора на текст из диапазона автоматически появляется оригинальный размер кнопки.

Возможно сделать с чистым css своего рода «обратный вызов», поэтому ReadMoreText будет вызван после того, как css для CardButton разрешено?

минимальный код:

const CardButton = styled.button`
    &:hover {
      border-radius: 25px;
      width: 170px;
      left: calc(50% - 85px);
      transition: all 0.3s ease-in-out;
  }
`;

const ReadMoreText = styled.span`
  ${CardButton}:hover & {
    display: inline;
  }
`;

return (
  <CardButton>
    <ReadMoreText>READ MORE</ReadMoreText>
    &#129122;
  </CardButton>
)