'Send Message' Button Styling

Solved
nikhilkaul
Visitor
2 0 0

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:

Screenshot 2023-09-25 at 10.19.30 PM.png

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

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

Accepted Solution (1)
Beae_Anthony
Shopify Partner
436 167 168

This is an 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

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

View solution in original post

Replies 2 (2)
Beae_Anthony
Shopify Partner
436 167 168

This is an 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

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
nikhilkaul
Visitor
2 0 0

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