Trying to create a parallelogram button - is it possible to use CSS to target the text within the button?

I'm trying to create a parallelogram-shaped button (see codepen in link) on a Squarespace site for a client. I know that this is possible to do through pure HTML/CSS, as is demonstrated in the link. However, I'm wondering if I can do this by manipulating regular Squarespace buttons via CSS.. I've figured out half the problem (skewing the whole button), but now I'm trying to target the text within and counteract the skew so that the text is normal. This is tricky because unlike the codepen, the whole element is an anchor link, and there's no additional span or text element wrapping the text. 

I'm able to skew the button with the following code: 

.sqs-block-button { 
  transform: skew(-20deg); 
}

In the linked codepen, there is a span element inside the anchor element, which then has this applied to it: 

.skew-fix{
  display:inline-block;
  transform: skew(20deg);
}

How can I apply those two lines of css to the text within the button, and keep the css on the button element the same? Or is there a better way to accomplish this? 

Hi,

I don't see Codepen link. Can you check again? I remember there is a similar thread in Circle Forum (you can also try searching solution there)