How can I color each of the three buttons for back, print, and submit different colors?

  • Profile Image
    watchhelp
    Asked on June 21, 2016 at 11:41 AM
    2. Color in buttons is underused across the web, in my not-so-humble
    opinion. Imagine if all forms had colorful buttons making it more clear
    which is back/cancel and which is submit. The preview widget show three
    buttons. How can I color each of these separately?
    Thanks!
  • Profile Image
    KadeJM
    Answered on June 21, 2016 at 11:58 AM

    I'm not sure if I am understanding you correctly but I believe you are referring to changing the colors of these buttons here when the preview widget is added to a form.

    Is this what you mean perhaps? 

  • Profile Image
    watchhelp
    Answered on June 21, 2016 at 03:00 PM

    Exactly. Allowing each button to have its own unique color. "Back" to be a cautious yellow/orange and "Submit" to be go-go green would be more clear for form-fillers :)

  • Profile Image
    david
    Answered on June 21, 2016 at 04:50 PM

    You can apply CSS to each one individually.  Here is the list of ID's for buttons:

    .form-submit-button

    .form-submit-reset

    .form-submit-print

    .form-pagebreak-back

    .form-pagebreak-next

    To make the submit button back green for example, the code would be:

    .form-submit-button{

       background : green;

    }

    The same can be done for any of the buttons with any color you would like. 

    .form-submit-button{

       background : orange;

    }

    And so on.

     

  • Profile Image
    watchhelp
    Answered on June 22, 2016 at 09:45 AM
    Thanks!
    Mark
    ...