Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 26, 2025 at 1:31 am #1485917
    lara666

    Hi Kresi Support,

    Hope you’re doing well.

    I’ve been trying to update the styling of the “Submit” button on our contact page (https://struct.net.au/contact/) so it matches the “Services” button to the right, but I haven’t had any luck getting it to look the same.

    Would you be able to help me with this?

    Thanks in advance.

    June 26, 2025 at 7:04 am #1485922
    Ismael

    Hey lara666,

    Thank you for the inquiry.

    You can add this css code to apply the style of the default dark transparent button to the contact form’s submit button:

    .contact-form :is([type=submit],button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

    Best regards,
    Ismael

    June 27, 2025 at 4:59 am #1485987
    lara666

    Hi Ismael,

    Thanks so much for your response, it’s looking great so far.

    Is it possible to make the submit button wrap more closely around the text (like the Services button), instead of stretching the full width of the column?

    Thanks!

    June 27, 2025 at 8:25 am #1486002
    Ismael

    Hi,

    Thank you for the update.

    We already set the width to 80px, but it seems to be overridden by the default styles. Try to replace the selector “.contact-form :is([type=submit], button:not([type=reset]))” with “#top #wrap_all .contact-form :is([type=submit], button:not([type=reset]))”.

    Let us know the result.

    Best regards,
    Ismael

    June 30, 2025 at 2:21 am #1486121
    lara666

    Hi Ismael,

    Thanks for getting back to me. Unfortunately, this change only reverts the button to red with white text, and it still spans the full width of the column.

    June 30, 2025 at 6:03 am #1486123
    Ismael

    Hi,

    Please remove the previous modification and replace it with the following css code, then make sure to purge the cache or clear your browser history afterward.

    #top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

    Best regards,
    Ismael

    June 30, 2025 at 6:32 am #1486127
    lara666

    Hi Ismael,

    Thanks so much, that worked perfectly!

    While we’re on the topic of buttons, I have another page where I’d like to keep the existing Form Color Scheme but change the button to a dark transparent style, like on the other pages. However, I can’t see an option for this in the Contact Form settings, could you please advise?

    June 30, 2025 at 7:04 am #1486133
    Ismael

    Hi,

    Try to edit the Contact Form element and set the Styling > Form Color Scheme to Dark Transparent. You can also replace the previous css with this:

    #top #wrap_all .main_color .button, .main_color #submit, #top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

    Best regards,
    Ismael

    June 30, 2025 at 7:23 am #1486135
    lara666

    Hi Ismael,

    Thanks for your response!

    Sorry, I’d like to keep the contact form as it is, but just change the submit button to dark transparent.

    July 1, 2025 at 5:41 am #1486185
    Ismael

    Hi,

    Have you tried using the recent css provided above? It should apply the same dark transparent style to the contact form’s submit button.

    Best regards,
    Ismael

    July 3, 2025 at 4:17 am #1486263
    lara666

    Hi Ismael,

    Yes, I’ve already applied it under Enfold > General Styling. Is there anywhere else I should be applying it to make sure it works correctly?

    Thanks!

    July 4, 2025 at 4:38 am #1486292
    Ismael

    Hi,

    Thank you for the updat.e

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings. If it’s still not working, provide the login details in the private field so we can test the modification.

    Best regards,
    Ismael

    July 10, 2025 at 12:37 am #1486550
    lara666

    Hi Ismael,

    Thanks for the suggestion.

    I tested it, but unfortunately, it didn’t work. Please see the login details below so you can take a look.

    July 10, 2025 at 5:51 am #1486558
    Ismael

    Hi,

    Thank you for the info.

    We edited the Quick CSS field and adjusted the selector in the css rule. Please purge the cache before checking. 

    #top #wrap_all .main_color .button, .main_color #submit, #top #wrap_all .contact-form :is([type=submit], button:not([type=reset]))

    View post on imgur.com

    Best regards,
    Ismael

    July 10, 2025 at 5:57 am #1486559
    lara666

    Hi Ismael,

    Thank you for the update, it looks great!

    Appreciate your help with this.

    July 10, 2025 at 6:46 am #1486569
    Ismael

    Hi,

    No problem! Let us know if you have more questions. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Submit button style change’ is closed to new replies.