How to Create Custom Submit Buttons

 Article #: ELN002F  Product: Flare   Version: 2021 r2

Summary:

This article provides details on how to change the look and label for the submit buttons used with knowledge check questions in HTML5 output.

Problem:

All browsers provide a default look for the button element. If you add a submit button to use with knowledge check questions in your Flare project but did not use the eLearning template project which includes some custom styles for the submit button, you may see the following look for the buttons.

Disabled State (before any answer option is selected)

Enabled State (after selecting an answer option)

Solution

Styles can be applied to the MadCap|submitQuestionButton style to change from the default look for the submit button.

  1. Copy the CSS from the code snippet below and paste it to the bottom of your project stylesheet. If you have tablet and mobile medium settings in your stylesheet, paste it before the section where @media tablet section starts.

    Copy 
    MadCap|submitQuestionButton  /*creates the custom look for the button in enabled state*/
    {
        width: 125px;
        height: 36px;
        background-color: #cecece; 
        border: solid 1px #cecece;
        color: #808080;
        font-size: 14px;
        line-height: 1.2em;
        margin-bottom: 1.5em;
    }

    MadCap|submitQuestionButton:hover /*change the colors used in the button when it is hovered*/
    {
        background-color:  #076685;
        border: solid 1px  #076685;
        color: #fff;
    }

    .submitQuestionButton:disabled,
    .submitQuestionButton:disabled:hover  /*change the colors used for the button when it is in disabled state*/
    {
        background-color: #e0e1e2;
        border: solid 1px #e0e1e2;
        color: #8a9297;
    }

  2. Save changes to the stylesheet, then build the target to test the changes.

  3. View the output to see the customized buttons and see if adjustments are needed.

    Disabled State (before any answer option is selected)

    Enabled State (after selecting an answer option)

    Hovered State (when hovering the mouse over the button after selecting an answer option)

    You may want to make adjustments to update the size of the buttons or colors for your branding needs.

    Examples

    • Change the size and color of the buttons.

      Solution

      The size of the buttons can be adjusted by changing the width and height for the MadCap|submitQuestionButton style. The background-color and border styles change the colors and borders used for the buttons.

      Copy 
      MadCap|submitQuestionButton  /*creates the custom look for the button in enabled state*/
      {
          width: 175px;  /*adjusts the width of the button*/
          height: 50px;  /*adjusts the height of the button*/
          background-color: #AFEEEE;  /*change the background color for the button in enabled state*/
          border: solid 1px #00CED1; /*change the border color for the button in enabled state*/
          color: #808080;
          font-size: 14px;
          line-height: 1.2em;
          margin-bottom: 1.5em;
      }

    • Change the label for the button from Submit to Show Answer.

      Solution

      This can be adjusted by adding a mc-label property along with the new text for the label to the MadCap|submitQuestionButton style.

      Copy 
      .MadCap|submitQuestionButton  /*creates the custom look for the button in enabled state*/
      {
         width: 175px;  /*adjusts the width of the button*/
          height: 50px;  /*adjusts the height of the button*/
          background-color: #AFEEEE;  /*change the background color for the button in enabled state*/
          border: solid 1px #00CED1; /*change the border color for the button in enabled state*/
          color: #808080;
          font-size: 14px;
          line-height: 1.2em;
          margin-bottom: 1.5em;
          mc-label: 'Show Answer'; /*change text for the Submit button*/
      }

    • Change the colors used for the button in a disabled state.

      Solution

      This can be adjusted by changing the background-color and border for the .submitQuestionButton:disabled style. he styles for the .submitQuestionButton:disabled:hover style are also included so that when the button is disabled, it has the same look when it is hovered.

      Copy 
      .submitQuestionButton:disabled,
      .submitQuestionButton:disabled:hover  /*change the colors used for the button when it is in disabled state*/
      {
          background-color: #E0FFFF; /*change the background color of the button when it is disabled*/
          border: solid 1px #E0FFFF; /*change the border color of the button when it is disabled*/
          color: #8a9297;
      }

    After making the above changes, the submit buttons look like this:

    Disabled State (before any answer option is selected)

    Enabled State (after selecting an answer option)

    Hovered State (when hovering the mouse over the button after selecting an answer option)

These are just examples of how the submit button can be customized and assume the button is using the parent MadCap|submitQuestionButton style. If you created custom style classes for the buttons, then the styles you use may need to be adjusted. You may also want to discuss with your developers regarding this or other options to customize your submit buttons.

Attribution:

Last updated:

8/20/2021

Author:

Marvin Mallari

Contributions by:

MadCap QA