Hide text from buttons / Appear after hover

Hello! 

I am trying to create buttons on which the text will be hidden and will appear only when hovering on top of them and the shape transforms from circle to rectangle. 

The code I've written seems to work fine for everything except the hidden text. Could you help me out? Any ideas? 

Attaching the CSS snippet below & a preview of the buttons!

Thank you

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
  background-color: #FC231B;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  transition: width 0.5s;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element span {
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
  height: 100%;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover {
  width: 100px;
  border-radius: 8px;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover span {
  opacity: 1;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element span::after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover span::after {
  opacity: 1;
  right: 0;
}

Hi,

Can you share link to this page? We can take a look