Jump to content

CSS - 'Animated Button Gradient' not working

Recommended Posts

Site URL: https://www.theblissboxstore.com/

Hello everyone,

 

I am trying to implement this cool animated gradient effect that I copy/pasted from Ghost Plugins
(link to that effect tutorial: https://www.ghostplugins.com/steps/8gh27ngh)

however, when I paste the code into my Design --> Custom CSS box, nothing seems to happen.  The only button on my site that I am trying to affect by the way is the "create" button on my home page.

 

Here is the totality of what I currently have inside my Custom CSS box.  You'll see there are some other effects in there.

/* bliss font */
div#block-yui_3_17_2_1_1610655915491_8117 h3 em {
    font-family: 'Lionness' !important;
  font-size: 150px;
}

/* checkout button */
.checkout-button {
    background-color: hsl(11, 33%, 75%) !important;
}

/* section gradient */
article .section-background {
    background-color: #1fc8db;
    background-image: linear-gradient(
140deg
 , #2c2d30 0%, #2c2d30 50%, #0c0d0d 75%);
}
  /* Animated Gradient Button */
.sqs-block-button .sqs-block-button-element--small {
  background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

 

Thanks in advance!

 

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply
2 minutes ago, dustinandjessica said:

Site URL: https://www.theblissboxstore.com/

Hello everyone,

 

I am trying to implement this cool animated gradient effect that I copy/pasted from Ghost Plugins
(link to that effect tutorial: https://www.ghostplugins.com/steps/8gh27ngh-y9l5y)

however, when I paste the code into my Design --> Custom CSS box, nothing seems to happen.  The only button on my site that I am trying to affect by the way is the "create" button on my home page.

 

Here is the totality of what I currently have inside my Custom CSS box.  You'll see there are some other effects in there.

/* bliss font */
div#block-yui_3_17_2_1_1610655915491_8117 h3 em {
    font-family: 'Lionness' !important;
  font-size: 150px;
}

/* checkout button */
.checkout-button {
    background-color: hsl(11, 33%, 75%) !important;
}

/* section gradient */
article .section-background {
    background-color: #1fc8db;
    background-image: linear-gradient(
140deg
 , #2c2d30 0%, #2c2d30 50%, #0c0d0d 75%);
}
  /* Animated Gradient Button */
.sqs-block-button .sqs-block-button-element--small {
  background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

 

Thanks in advance!

 

The sample target small button, also I helped you target the correct button id and update the code like

Quote
/* bliss font */
div#block-yui_3_17_2_1_1610655915491_8117 h3 em {
    font-family: 'Lionness' !important;
  font-size: 150px;
}
  /* Animated Gradient Button */
#block-8b20f910bf9593ae5690.sqs-block-button .sqs-block-button-element {
  background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

 

image.thumb.png.2a2a66b72924a68bef61e3bdfc343980.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.