FAQ: How to add a custom button to the answers

Pro Tips Elfsight Widgets Tips
1

Looking for a way to add a custom button to the answers of your FAQ widget? Just follow these simple steps and you’ll be fine!

Create a linked text with a custom code

Open the Code Editor mode in the Answer section and paste this code there - <a href="https://example.com" class="button">Press me</a>

image
image331×340 11.3 KB
image
image560×474 17 KB

Note: Do not forget to replace the example link and text with your own


Transform the linked text into the button

To make the linked text look like a button, please add this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

image
image329×325 7.56 KB

image
image602×604 28.8 KB


Note: You’re very welcome to set any other color, radius, padding by changing the value in the CSS code :slightly_smiling_face:


Note: If you’d like to see a button for answers as an option in the settings, please upvote this Wishlist idea - Add linked button to answers


Guys, was this solution helpful to you? Let us know in the comments :wink:

2 Likes