Skip to content
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
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.