how to add an animated background on the button with full source code style on the Squarespace website with a custom Code! by jishaansinghal
- Get link
- X
- Other Apps
Animated Gradient Button
In this video, I'm going to show you how to add an animated background on the button with full source code style on the Squarespace website with a custom Code!
Add an animated background on the button with full source code style on the Squarespace website with a custom Code!
How To Install:
Add a button to any page with a solid or outline button style.
Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
An updated button style with a solid button style. This plugin uses a CSS editor and works with Squarespace 7.0, 7.1. add active effect on Button on Squarespace 7.0, 7.1 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.0, 7.1 templates.
This code uses CSS editor Copy and pastes the code below into the editor box.
--------------------------------------------------------------------------------------------------------
// Animated Gradient Button //
.sqs-block-button .sqs-block-button-element {
background: -webkit-linear-gradient(135deg, #53D6FF, #666BE1, #E45372, #F07C63);
background: -moz-linear-gradient(135deg, #53D6FF, #666BE1, #E45372, #F07C63);
background: -o-linear-gradient(135deg, #53D6FF, #666BE1, #E45372, #F07C63);
background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
-webkit-background-size: 400% 400% !important;
-moz-background-size: 400% !important;
-o-background-size: 400% !important;
background-size: 400% !important;
-webkit-animation: Gradient 10s ease infinite !important;
-moz-animation: Gradient 10s ease infinite !important;
-o-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%}
}
@-webkit-keyframes Gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-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%}
}
---------------------------------------------------------------
Customize:
You do not need to change the transform or transition values. This helps create the effect of the button being pushed down.
The code works for the All button block. If you want to modify a small or large button, replace all .sqs-block-button-element.
If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:
Connect/Contact with me here
Fiverr : https://www.fiverr.com/jishaansinghal
Youtube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ
Facebook : https://www.facebook.com/jishaan.singhal
Twitter : twitter.com/jishaan_singhal
Instagram : https://www.instagram.com/jishaansinghal
Linkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203
Blogger : https://jishaansinghal.blogspot.com
Email : jishaanwm21@gmail.com
Keywords:how to add an animated background on the button. Text issues squarespace,how to fix text issues in squarespace,fixing the text in squarespace,squarespace text block,text block squarespace,squarespace text editor,squarespace,how to use Squarespace,squarespace tutorial,squarespace tutorial for beginners,how to use Squarespace 2018,how to add text squarespace,text spacing issue squarespace,Solopreneur Sidekick #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #2021 #2020#2022,squarespacewebsitedesign,squarespace,css,jishaansinghal,designer,jquery,squarespacewebsite,customcss,design,announcementbar,squarespacewebsitedesigner,animated,html,fiverr,codecheatsheet
"JISHAANSINGHAL"
- Get link
- X
- Other Apps
Comments
Post a Comment