shellieboo

Great, thank you @tuanphan!  I was away, but fixing it 🙂

Thanks so much @tuanphan 😃

Yes please! 

Worked perfectly! Thanks @bangank36 !

Site URL: https://moose-sepia-m3gk.squarespace.com/

hello all,

I am trying to change the "Order Online" to have an outline button for the link. I believe I did this before by starting with a template where the button was outlined, but on this particular site, none of the code I am trying is working. Here is the website: https://moose-sepia-m3gk.squarespace.com/ 

and pw: lipscafe-ss

Here is the last code I tried:

//button cta
a.Header-nav-item:last-of-type {
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 100px;
}

Any help is much appreciated!

Thank you,

Sure,

For the animated gradient, at the beginning of the code, change ".css-selector" to  ".section-background" See the first four lines of the original code below for where it appears (and of course change the collection to your block id).

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;

I figured it out 😀  if anyone needs help let me know!

Hi, no it doesn't animate at all when I scroll.

Site URL: https://lime-wolverine-672z.squarespace.com/

Hello!

I am trying to figure out how to create an animated background on my (trial) site. I tried the most referenced option -

https://www.gradient-animator.com/

and set the id to my collection background:

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;

  

    -webkit-animation: AnimationName 30s ease infinite;

    -moz-animation: AnimationName 30s ease infinite;

    animation: AnimationName 30s ease infinite;

}



@-webkit-keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@-moz-keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

  } 

I've also tried this code to no avail and set it to each section background (this is currently up):

section[data-section-id="60ea7162025aa46e30e0a4bd"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea7162025aa46e30e0a4bb"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea715052638457540dc335"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}

Am I missing a code block or class id? Do I need to have a business plan for the animations to work? Or are my eyes deceiving me?

Here is my site: https://lime-wolverine-672z.squarespace.com/ and login is pine212apple

Thank you for your help!