In this blog, we will learn how to create an awesome UI button to take position of the default button in Power Apps. This will be done using an HTML code.
Let's create a new blank canvas app to begin. If new to power apps, check this out on the Microsoft Learn site.
This will be done in a few steps.
1. Click on the Insert tab ---> Text ---> HTML text
2. In the HtmlText, clear the default code and input the below.
Generate your pereferred gradient color code using the CSS Gradient generator.
"<div style='background: linear-gradient(90deg, rgba(12,204,237,1) 0%, rgba(15,252,224,1) 100%);
box-shadow: 1px 2px 22px 0px rgba(89,87,87,0.85);
margin: 20px;
width: 290px;
height: 80px;
border-radius: 30px'>
</div>"
The final code and preview should look like this.
3. Create a button. Insert tab ---> Button
Place the button on the HTML text container. Resize the button to fit on it and change the following properties as below.
- Text - Change to your preferred. Here, it's a "Sign In" button.
- Color - Change the color to transparent. That is RGBA(0, 0, 0, 0) as shown.
- Border - Click the border line and select None from the dropped down options.
You can make configuration to your button OnSelect even after setting up the properties making it transparent.
5. Finally, we will create a container to hold the button by following step 1 and 2 with a little change in the code to make the container transparent. The width and the height should also be adjusted.
"<div style='background-color: rgba(0,0,0,0);
box-shadow: 1px 2px 22px 0px rgba(89,87,87,0.85);
margin: 20px;
width: 500px;
height: 600px;
border-radius: 30px'>
</div>"
6. Move the button into the container then Right-click the container ---> Reorder ---> Send to back (this will enable you to be able to work on the button without the container interfering)
Summary
We learnt how to create customized button using the HTML Text in Power Apps studio with a gradient color and added a default button which was made to appear transparently on top of the customized container. Then created another container which the sizes and color was adjusted to be able to contain other objects.
Final look at the customized UI button and container.
Resources to get you started and keep going!
Free Microsoft 365 E5 instant sandbox
Get started with Power Apps canvas apps
