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!