Jump to content

Jayraissis

Member
  • Posts

    2
  • Joined

  • Last visited

Jayraissis's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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; }
×
×
  • 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.