How can I style my 'Send Message' button to have a border and change colors when clicked?

[nikhilkaul]

Hi,

I want to style my the 'Send Message' button to have a border like the rest of the form, rather than just floating the way it is in my template. I would like the button to turn into a solid peach colour and the text to turn green when clicked. Screenshot here:

https://www.jungal.in/pages/contact 

Any help with this would be most helpful! Thanks in advance!

[Beae_Cass · Accepted solution]

Hi @nikhilkaul ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
.contact__button > button {
    border: 2px solid #F8CEB5; 
    transition: background-color 1s, color 1s; 
}

.contact__button > button:active {
    background-color: #ff9966; 
    color: green; 
}
</style>

Best regards,

Anthony

[nikhilkaul]

Thank you Anthony! That worked like a charm!!!