Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Gradient Button

MyCondy

Last edited 104 days ago by MyCondy

Thanks to HTML TEXT object you can make a beautiful button.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Group

1x Button PCF

1x HTML TEXT

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?

1x Group

1x Text

1x Rectangle

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

lbl_button_name = Label

html_gradient_button = HTML TEXT

YAML Output

⁠

⁠

Used Colours

HTML Box Colour1 - #F6D3DE

HTML Box Colour2 - #728EDB

⁠

← Counter⁠

⁠

Icon with Notification →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.