All Collections
How-To Guides
Customising a Button for Overlays
Customising a Button for Overlays

Creating button's for Overlays can be created to suit the look and style of the content.

Vudoo avatar
Written by Vudoo
Updated over a week ago

Yes, we know.. a button is a button, however in Vudoo's overlay feature it is now easy to create the button to look and feel the way you need to suit the branding, with colours, boarders, round or square corners and padding.

Select 'Add new element' when you are in the overlay template editing feature.

Over on the right side of the screen, a variety of options will be provided.

Selecting the 'Button' option will create a button over on the overlay template along with open the editing options on the right side of the screen.

Working the way through each of of the editing options will allow for the button to be built to the specific requirements.

Text - Will allow for the text format to be populated, as well as left, centre and right for the button text.

Set link URL - Linking the button to a specific location such as a website landing page is as easy as dropping a link and selecting if the page should open externally to the video or within the same tab.

Accessibility Screen reader description - Make the button accessible to screen readers by adding a description within this field, to allow the button action to be specifically described.

Info: This field will provide further description of the purpose of the button for a screen reader user.
The screen reader will read both the button ‘Text' field and the 'Accessibility - Screen reader description' field together
It also will automatically add the following at the end of it:

  • ‘Opens in new tab' if you have chosen External in ‘Set link URL’

  • ‘Opens in new tab' if you have chosen ‘Phone’

  • ‘Opens in new window’ for Email

Text colour - Selecting the text colour or white, black or adding a hex value to better suit the colour requirements.

Button colour - Selecting from the colour picker will allow the button colour to be implemented. Including a hex value will also provide a more specific colour option for the button.

Now it is time to style the button in the best way to help it stand out to the viewers.

Boarder- Would the button require a boarder, toggle this option on to allow for the boarder on a button and provide a hex colour to ensure that the border colour suits your best requirements along with the thickness for the boarder.

Rounded corners - In much the same way as the boarder thickness, the corners can be rounded but selecting the specific pixel size.

Size - The size of the button will either depend on the text within this area or this is the ability to toggle on to ensure a full width of the button.

Padding - Last but not least, selecting the padding around the button, which is the space between the element and the button edge. This can be adjusted to suit the requirements of the size by including a value for each side within the available options provided, top, bottom, left and right.

Ta - Da! There is your button created specifically to your branding requirements.

Did this answer your question?