Jump to content

Hide text from buttons / Appear after hover

Recommended Posts


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;

cognimus home page graph (1).png

cognimus home page graph (2).png

Edited by Jayraissis
Link to comment
  • Replies 1
  • Views 240
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.