Jump to content

Transform and transition not working with list button CSS

Recommended Posts

Hi all 🙂

Busy building a new site, and have successfully used the below code to add an arrow to all button types, and then on hover, animate the button to rotate 180 degrees. This is working for all non list buttons. 

///add arrow to button, and rotate 180 on hover ///

.sqs-block-button-element:after{ content: "➔";

font-size:0.8rem;

padding: 0px 10px;

  vertical-align:middle;}

 

.sqs-block-button-element:hover::after {

   -webkit-transition: 0.5s ease-in-out;

    transition: 0.5s ease-in-out;

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform:rotate(180deg)}

 

However when I try to do the same for list buttons with the below code it isn't working.

.list-item-content__button.sqs-block-button-element:after{ content: "➔"!important;
font-size:0.8rem;
padding: 0px 10px;
  vertical-align:middle;}

.list-item-content__button.sqs-block-button-element:hover::after {
   -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform:rotate(180deg)}


I have tested that I am targeting the correct element, and just the 'after' content (that is the arrow) by using other attributes such as colour, and that works as intended.

But using transition and transform I get no results...
Any ideas? 🙃

 

 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Thanks for the reply 🙂

The client ended up cutting that list out the design so don't need to solve the issue.

You're welcome to delete the thread, but it might be helpful as the code is useful for regular buttons.

Link to comment

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.