onika Posted November 7, 2022 Share Posted November 7, 2022 Hello, I am working on a site for which I received a design in Adobe XD. All the buttons should have a hight of 50 px with a border radius of 16 which I think is working well now. However, on hover I need the button to go black #0F1215. I added this code, but the hover is not working: .primary-button-shape-rounded .btn, .primary-button-shape-rounded .sqs-block-button-element--medium, .primary-button-shape-rounded .sqs-block-button-element--small, .primary-button-style-outline .white-bold .sqs-block-form .sqs-editable-button { border-radius : 16px; } .sqs-block-button-elment:hover { background-color: #0F1215!important; font-weight: bold!important } Thank you for any advice! Link to comment
Ziggy Posted November 7, 2022 Share Posted November 7, 2022 Try changing you code to this: .primary-button-shape-rounded .btn, .primary-button-shape-rounded .sqs-block-button-element--medium, .primary-button-shape-rounded .sqs-block-button-element--small, .primary-button-style-outline .white-bold .sqs-block-form .sqs-editable-button { border-radius : 16px; &:hover { background-color: #0F1215!important; font-weight: bold!important; } onika 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
onika Posted November 9, 2022 Author Share Posted November 9, 2022 Wonderful, thank you so much this is working now! Link to comment
Ziggy Posted November 9, 2022 Share Posted November 9, 2022 Fantastic, could you mark my post as the solution and give me a thumbs up? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
onika Posted November 9, 2022 Author Share Posted November 9, 2022 Just one one question, the form button does not react so I assume I need to address the form button with additional CSS directly? What would be the script? Link to comment
onika Posted November 9, 2022 Author Share Posted November 9, 2022 On 11/7/2022 at 6:40 PM, Ziggy said: Try changing you code to this: .primary-button-shape-rounded .btn, .primary-button-shape-rounded .sqs-block-button-element--medium, .primary-button-shape-rounded .sqs-block-button-element--small, .primary-button-style-outline .white-bold .sqs-block-form .sqs-editable-button { border-radius : 16px; &:hover { background-color: #0F1215!important; font-weight: bold!important; } This is a great solution! Link to comment
Ziggy Posted November 9, 2022 Share Posted November 9, 2022 7 minutes ago, onika said: Just one one question, the form button does not react so I assume I need to address the form button with additional CSS directly? What would be the script? Yes, the form buttons have a slightly different CSS class, so you'll need to add that and test it. Try: .sqs-editable-button onika 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
onika Posted November 9, 2022 Author Share Posted November 9, 2022 Working well! Thank you again! 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