Mattbia Posted October 10, 2023 Share Posted October 10, 2023 Screen Recording 2023-10-10 at 4.06.57 PM.mov Hey all, I can not find how to invert the colors when the mouse hovers over a submit button on a form...I want it to go from blue background, white text >>> White Background, blue text. Can anyone help me with the code needed for this... Thank you in advance Link to comment
CassAggett Posted October 11, 2023 Share Posted October 11, 2023 @Mattbia Can you share your website address? You've already got code in your Custom CSS panel to achieve this effect as this isn't standard hover for Squarespace buttons. Have you gone through the Custom CSS panel (in Website > Website Tools > Custom CSS) to see what you've already got in there? It's likely you'll need to edit that - we can help 😊 If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆 Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business. WEBSITE • INSTAGRAM Link to comment
Mattbia Posted October 11, 2023 Author Share Posted October 11, 2023 Hi @CassAggett, This is what I got in there so far. The hover effect for buttons is created using the "flex" animation under animations in site styles. //Shadow// .sqs-block-button-element { -webkit-box-shadow: 10px 10px 41px -11px rgba(48,48,48,1); -moz-box-shadow: 10px 10px 41px -11px rgba(48,48,48,1); box-shadow: 10px 10px 41px -11px rgba(48,48,48,1); } .video-block .video-player{ padding-bottom:120%} /* Change the focus style */ .sqs-block-form .field-list .field input:focus, .field textarea:focus{ background: #F6EDCE; outline: none!important } /* Change (required) to an asterisk */ .sqs-block-form span.required{ visibility:hidden } .sqs-block-form span.required:before{ content:"*"; visibility:visible!important } Link to comment
Mattbia Posted October 11, 2023 Author Share Posted October 11, 2023 Sorry website address: bianutrition.com/entry-form The hover effect on the main buttons works great and inverts colors fine, but for some reason, the form button does not follow the same logic and defaults to site colors rather than inverting selected button colors. Link to comment
Solution Mattbia Posted October 11, 2023 Author Solution Share Posted October 11, 2023 Okay, I found the workaround. The form button pulls color from the primary button, so I needed a separate dedicated color theme with the colors I wanted for that specific button for the primary and adjusted the "color background on background" to blue as well. tuanphan and CassAggett 2 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