How to chance the submit-button-color after clicking

  • Profile Image
    gruetzmacher
    Asked on August 25, 2018 at 08:03 AM

    Hi, is there a possibilty that - after clicking the submit-button - the color of the button changes durable until the page is reloaded? Thank you for your help.


    Steve

  • Profile Image
    Mike_G
    Answered on August 25, 2018 at 12:01 PM

    Yes, that would be possible using CSS codes that can be injected into your form. — How-to-Inject-Custom-CSS-Codes

    Here's the code:

    .form-submit-button:focus, .form-submit-button.lastDisabled {

        background: lightblue !important;

    }

    You can change the value of the background property to your preferred color.

    1535212782t11_58_33.png

    I hope this helps. If you have any further questions regarding this, please feel free to let us know.

  • Profile Image
    gruetzmacher
    Answered on August 25, 2018 at 02:16 PM

    Dear Mike_G,


    absolut fantastic! Thank your very much! Is there also a possibility to change the color of the button-border durable after clicking the button? Thank you for your help.


    Steve

  • Profile Image
    Mike_G
    Answered on August 25, 2018 at 03:49 PM

    To change the color of the border and its shadow, please see the additional codes below.

    .form-submit-button:focus, .form-submit-button:visited, .form-submit-button.lastDisabled {

        background: lightblue !important;

        border-color: blue !important;

        box-shadow: 0 1px cyan inset, 0 1px #ddd;


    }

    If you have other questions or concerns, please feel free to contact us anytime.

  • Profile Image
    gruetzmacher
    Answered on August 26, 2018 at 01:18 PM

    Thank you very much - it works. Last question: After the user has pressed the submit-button, the button-color turns into white. It is my aim to hide the button in front of a white background after it is pressed. So far - so good. If a user now touches the (hide) button with its cursor by mistake, the border of the button turns into orange - the rest of the button is still white. How can i change the color of the hover-effected border of the button? 

    Steve

  • Profile Image
    Mike_G
    Answered on August 26, 2018 at 02:46 PM

    To my understanding, you would like to change the border color of the submit button when it is being hovered over.

    Please try the CSS codes below to achieve your requirements.

    .form-submit-button:hover {

        border-color: green !important;

    }

    If, in any case, I have misunderstood your concern, please do not hesitate to let us know. Also, please let us know the form you are working on and provide us with more details about your concern.