bawebb123 Posted February 19 Share Posted February 19 Website: https://impala-plantain-nen3.squarespace.com/ Password: opp I want to recreate a hover effect for my website's buttons similar to this website: https://www.chilipiper.com/ Here is the current code I have for my buttons: //beginning of button CSS .sqs-block-button-element { display: inline-block; border-radius: 10rem; color: #fff; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.15rem; transition: all 0.3s; position: relative; overflow: hidden; z-index: 1; background: none; border: none; } .sqs-block-button-element:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #2DACDB, #0cf); z-index: -2; } .sqs-block-button-element:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: #1D386E; transition: all 0.3s; z-index: -1; } .sqs-block-button-element:hover { color: #fff; } .sqs-block-button-element:hover:before { width: 100%; } //end of button CSS Link to comment
JessicaM Posted March 29 Share Posted March 29 (edited) @bawebb123 & @moonlitdesign Try this.. this will add it to the primary buttons... change "primary" in the top line to "secondary" or "tertiary" if you want to use it on other buttons. **If you're using fluid engine, be sure the button is set to "fit" and not "fill". #siteWrapper .sqs-button-element--primary:not(div.sqs-add-to-cart-button) { display: inline-block; border-radius: 20px; justify-content: center; align-items: center; box-shadow: none !important; color: #fff; font-size: 1rem; transition: all 0.3s; position: relative; overflow: hidden; z-index: 1; background: linear-gradient(to right, #2DACDB, #0cf); border: none; &:before { content: ""; background: #1D386E; position: absolute; width: 130%; height: 200%; z-index: -1; left: -15%; border-radius: 100%; transition: 0.2s; bottom: -200%; } &:hover:before { bottom: -50%; } &:hover { opacity: 1 !important; } } Edited March 29 by JessicaM moonlitdesign 1 Jessica Miller | Squarespace Website Designer https://www.jessicamiller.work jessica@jessicamiller.work Search the blog and get weekly Squarespace tips to your inbox https://www.jessicamiller.work/blog Want to pick my brain or get help? Book a free 15 minute call. Link to comment
moonlitdesign Posted March 29 Share Posted March 29 23 minutes ago, JessicaM said: @bawebb123 & @moonlitdesign Try this.. this will add it to the primary buttons... change "primary" in the top line to "secondary" or "tertiary" if you want to use it on other buttons. **If you're using fluid engine, be sure the button is set to "fit" and not "fill". #siteWrapper .sqs-button-element--primary:not(div.sqs-add-to-cart-button) { display: inline-block; border-radius: 20px; justify-content: center; align-items: center; box-shadow: none !important; color: #fff; font-size: 1rem; transition: all 0.3s; position: relative; overflow: hidden; z-index: 1; background: linear-gradient(to right, #2DACDB, #0cf); border: none; &:before { content: ""; background: #1D386E; position: absolute; width: 130%; height: 200%; z-index: -1; left: -15%; border-radius: 100%; transition: 0.2s; bottom: -200%; } &:hover:before { bottom: -50%; } &:hover { opacity: 1 !important; } } THANK YOU !!!!! that's perfect. just had to make few adjustments here and there but otherwise perfect. can't thank you enough! #coolbuttonhovereffect #circlebuttonfillonhover JessicaM 1 Link to comment
JessicaM Posted March 29 Share Posted March 29 @moonlitdesign Welcome! Jessica Miller | Squarespace Website Designer https://www.jessicamiller.work jessica@jessicamiller.work Search the blog and get weekly Squarespace tips to your inbox https://www.jessicamiller.work/blog Want to pick my brain or get help? Book a free 15 minute call. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment