add hover effect on Button on Squarespace 7.0 and 7.1 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1 and 7.0 templates.
In this video, I'm showing you how to add a hover effect on the Button on the Squarespace website with custom Code!
You can change the movement value which you wanted.
This code uses CSS editor Copy and pastes the code below into the editor box.
--------------------------------------------------------------------------------------------------------
//add Move when you hover on Every button Button on Squarespace 7.0 and 7.1//
.sqs-block-button .sqs-block-button-element{
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
.sqs-block-button .sqs-block-button-element:hover {
margin-left: 60px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
--------------------------------------------------------------------------------------------------------
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 hover custom animation/effect on button on squarespace website squarespace 7.1, 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"
Comments
Post a Comment