Customize Buttons and Audio

Step 1

Open Button (Audio) settings.
Navigate to “Style” tab of Settings.
Scroll to the bottom of “Style” tab to find the “CSS Class Name” field.
Type in the custom CSS class name for the element.

Examples: custom-button, fabl-custom-audio

Step 2

Insert a CODE BLOCK element at the end of your story.

Note: If the story will consist of several pages, so you should add "Code"
at the end of each page

Open the CODE BLOCK by clicking around the area and insert the code snippet below:

<style>
  .fabl-custom-audio .media-player .media-player-audio .media-player-button {
    font-size: 40px;
    vertical-align: baseline;
    color:green;
  }
  .custom-button .btn-primary{
    background-color: black;
    border-color: red;
    color: red;
    padding: 15px 30px;
  }
  .custom-button .btn-primary:hover{
    background-color: red;
    border-color: black;
    color: black;
    padding: 15px 30px;
  }
</style>

Next to each CSS style property, i.e. “background-color”, type any of the appropriate variables you want (e.g. color in HEX, RGB etc. notations).

Result

Sample audio

Sample button