LOADING

Step 1

Open ‘Themes’ tab in Fabl Dashboard.

Step 2

Create a Custom Theme (or open an existing one) in your Account and add the following styles into ‘Custom styles to all stories with this theme’ block:

.themed-account .oracle-cx-theme .f-style a.oracle-btn {
border: 2px solid #fff !important;
border-radius:0 !important;
cursor:pointer;
background-color:transparent !important;
color: #fff !important;
text-transform: none !important;
font-family: Arial !important;
font-size: 16px !important;
transition-duration: 0.3s;
padding: 12px 20px;
display: inline-block;
margin-top: 25px;
background-position: center center;
text-decoration: none !important;
opacity: 1;
}
.themed-account .oracle-cx-theme .f-style a.oracle-btn:hover {
color:#015061 !important;
background-color: #fff !important;
}

The styles above will be applied to all buttons (with the respective classes) on the Account level. Therefore, step #2 should be completed only once.

Step 3

Open a Story in Edit mode and add a Code Block. Paste the following code snippet into the Code Block:

<a class="hover-btn oracle-btn" href="https://testurl.com"; target="_blank">Button Name</a>

Step 4

To finalize the button, make sure that the Story has Custom Theme ‘selected’. To adjust the button (font, color, etc.) please make respective changes to the CSS mentioned at step #2.