Creating a custom button
Learn how to create a custom button with best design practices. Then tag it and apply hover effects and actions.
-
Draw a button by creating a frame and applying styling to it
-
Then add your text inside of the frame
![](/docs/image-7526@2x.png)
Note: Avoid using a rectangle with text on top of it as this creates uneccesary lines of code during code generation.
Tag, add hover effects and actions
- Select the button frame and tag it as a button. For custom buttons, select “none” for the UI library
![](/docs/image-7527@2x.png)
- In the Styling & Layout settings, click the “hover” tab and change the fill colour.
![](/docs/custom-button/custombutton1.png)
- In the Actions settings, you can choose an action to be taken when the button is clicked.
![](/docs/custom-button/custombutton2.png)
- You have successfully created a custom button