yelahisabelle Posted January 25 Share Posted January 25 (edited) I'm trying to convert this codepen button style in a way that Squarespace recognizes. I don't need the gradient background or gradient outline. Thank you! https://codepen.io/codewithdeveloper/pen/GRPwRaN Edited January 25 by yelahisabelle needed to insert link Link to comment
FluffCreativeStudio Posted January 25 Share Posted January 25 Hey there, do you mind sending along the code or a link to codepen? Link to comment
yelahisabelle Posted January 25 Author Share Posted January 25 Just now, FluffCreativeStudio said: Hey there, do you mind sending along the code or a link to codepen? Just added it to the post 🙂 Link to comment
Solution FluffCreativeStudio Posted January 25 Solution Share Posted January 25 Press down button option - Watch Video // Button Block - Solid Drop Shadow Style// .sqs-block-button-element { box-shadow: 10px 10px #02CBC6;; border: 1px solid #fff !important; transition: all ease-in 0.2s !important; } .sqs-block-button-element:hover { box-shadow: none; transform: translateY(4px) !important; transition: all ease-in 0.2s; opacity: 1 !important; } Link to comment
FluffCreativeStudio Posted January 25 Share Posted January 25 Oh, and actually if you add this bit of code it will move the drop shadow much like the example you showed: .sqs-block-button-element:hover::after { transform: translate(1rem, -1rem); } Link to comment
yelahisabelle Posted January 25 Author Share Posted January 25 25 minutes ago, FluffCreativeStudio said: Press down button option - Watch Video // Button Block - Solid Drop Shadow Style// .sqs-block-button-element { box-shadow: 10px 10px #02CBC6;; border: 1px solid #fff !important; transition: all ease-in 0.2s !important; } .sqs-block-button-element:hover { box-shadow: none; transform: translateY(4px) !important; transition: all ease-in 0.2s; opacity: 1 !important; } Thank you so much!! FluffCreativeStudio 1 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