Thanks to HTML TEXT object you can make a beautiful button.
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create HTML button box
Add a new HTML TEXT object, call it "gradient_html" with this "HTML text" property:
"<div class='borderDemo' style='color:white; border-radius: 20px;display:flex;justify-content: center;align-items: center;font-size: 22px;height: 80px;width: 240px; text-align: center; background: linear-gradient(#F6D3DE, #728EDB);'>GRADIENT</div>"
Step 2 - add transparent button
Add a new Button PCF object, call it "ButtonAction" with this "Appearance" property:
'ButtonCanvas.Appearance'.Transparent
Step 3 - group all objects
Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a gradient rectangle
Add a new Rectangle (R command) object, call it "html_gradient_button" with these properties:
Step 2 - create a title of button
Add a new Text (T command), call it "lbl_button_name" with these properties:
Step 3 - group all objects
Select all objects and press COMMAND + G (MAC) or CTRL + G (WIN) and call the group "gr_gradient_group".
This is an output:
How to use it via DesignKit
Prerequisites
the designed component according to the instructions from the previous section Used Prefixes
gr_gradient_group = Group html_gradient_button = HTML TEXT YAML Output
Used Colours
HTML Box Colour1 - #F6D3DE HTML Box Colour2 - #728EDB