Change Back and Next Buttons in Different Colours

  • Profile Image
    IFACO
    Asked on November 16, 2017 at 09:55 AM

    Is there code that I can use to make the 'back' and 'next' buttons different colours?


  • Profile Image
    lumiardian
    Answered on November 16, 2017 at 10:04 AM

    You can change that if you go to Form Designer button see image 1, and then another window will open, you can find properties about next and previous button.1510844604jott.png1510844618jott2.png

  • Profile Image
    EltonCris
    Answered on November 16, 2017 at 11:38 AM

    lumiardian's guide is for the new form layout.

    Since you are using the standard form's layout, you can use the following CSS codes and inject it into your form to change the next and back buttons color.

    .form-pagebreak-next {

        background-color: #00a0f0 !important;

        border-color: #00a0f0 !important;

    }

    .form-pagebreak-back {

        background-color: #00a0f0 !important;

        border-color: #00a0f0 !important;

    }

    If you wish to change the background colors on mouse focus, add this.

    .form-pagebreak-next:hover {

        background: #54a2f9 !important;

        border-color: #54a2f9 !important;

    }

    .form-pagebreak-back:hover {

        background: #54a2f9 !important;

        border-color: #54a2f9 !important;

    }

    The next and back text in bold is your hint on which button is it for.

    If you want to change the colors, you can replace the hex color codes e.g. #00a0f0.

    The above code gives you the following result.

    If you need further assistance, please let us know.

  • Profile Image
    IFACO
    Answered on November 16, 2017 at 03:30 PM

    Thank you so much both of you. 
    The code has worked perfectly.

    Becca