Creating buttons with various UI techniques and micro interactions in Canvas apps

Do you also want to create buttons with different techniques and animations like the ones below for your Canvas apps? Let me show you how to create these. Let’s step away from the boring, simple, ugly apps we are creating and design something with more character.

I will even show you how to use the effects on a custom onHover property so it looks like the one below.

To create these buttons we need to combine several techniques. These techniques are:

1. Using SVG images

2. Using CSS animations

3. Creating HTML styling

4. PCF code component

When these three are combined we can create these beautiful buttons.

In this first post I will explain how to use SVG images in your Canvas applications and why these are better to use then other images.

SVG Images

What are SVG Images?

SVG, short for Scalable Vector Graphics, is a format used to create graphics based on vector data, defined in XML. Unlike raster images, SVG graphics are resolution-independent, meaning they can be scaled up or down without losing quality, making them perfect for responsive designs.

One of the key advantages of SVG is its versatility. Since it’s defined in code, you can easily manipulate colors, shapes, and animations directly through CSS or JavaScript. Plus, SVGs are widely supported by all major web browsers, ensuring compatibility across devices.

Furthermore, since they are lightweight and don’t rely on large file sizes like traditional raster images (e.g., PNGs or JPEGs) they offer significant performance improvements in Power Apps.

This makes SVGs a powerful tool for creating sleek, animated, and customizable buttons in Power Apps!

How do SVG images work?

Since after this blog series you will never want to work with anything else other than SVG images let’s talk a bit about how an SVG image works.

An SVG image is defined using XML markup, where elements like <rect>, <circle>, and <path> create shapes by specifying their attributes (e.g., size, position, and color). The <path> tag is particularly powerful for drawing complex shapes, using commands like M (Move To), L (Line To), and C (Curve To) to define coordinates and curves. For instance, a simple triangle can be created by specifying the points to move and draw lines between, closing the shape with the Z command. This allows precise control over intricate designs with minimal code.

SVGs can be styled either with inline attributes (e.g., fill, stroke, stroke-width) or through embedded <style> tags that apply CSS rules, similar to HTML. This enables dynamic control of colors, strokes, and animations, making SVGs ideal for interactive designs. It also has the added benefit of doing more in code which will ultimately make you a better developer 🤓.

How to use SVG images in your Canvas Power App?

So how do we use these magical SVG images? That’s very simple.

First we locate an SVG image we want to use for our Canvas app. For instance, we can go to https://icons.getbootstrap.com/ and find an icon we want to use for our SVG image. We then copy the SVG code which is located on the bottom right of the page:

Important note! This code uses double apostrophes while in the Canvas app you need to use a single quote. Be sure to paste this code into something like Notepad++ and replace all double quotes with single ones!

Then we are ready to implement this SVG image in our app.

1. We create an image control.

2. We add the file type to the beginning which is:data:image/svg+xml;utf8,

3. We then use the EncodeUrl() function to wrap the entire SVG code in it.

4. This will result in the following code

    "data:image/svg+xml;utf8,  " & EncodeUrl("
    <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-archive-fill' viewBox='0 0 16 16'>
      <path d='M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1M.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8z'/>
    </svg>"
    )
   

5. And will result in the following image

Another important note! Be aware of the double apostrophes used before and after the file type (step 2) and within the EncodeUrl() (step 3). A lot of the errors you will receive working with SVG images can be caused by misplacing these single and double quotes.

How to alter your SVG images in your Canvas Power App?

There are lots of things you can do with SVG images, and here I want to focus on the following two.

1. Changing the fill property

2. Changing the viewBox property

For the first one, changing the fill property, we have two options. We can change the fill property for the specific <path> tag or we can add a fill property on the <svg> tag which will act as a default value for all child elements in the SVG. Below two examples.

Fill property - Example 1: fill on the <svg> tag

Notice how the fill property within the <svg xmlns= … > tag is changed to ‘red’ in this example.

"data:image/svg+xml;utf8,  " & EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' fill='red' class='bi bi-archive-fill' viewBox='0 0 16 16'>
  <path d='M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1M.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8z'/>
</svg>"
)

This gives us the following image:

Fill property - Example 2: fill on the <path> tag

To show you the difference of changing the fill on the path tag lets use a different SVG image with multiple paths.

The following SVG code has fill properties on different paths making the inner cross green and the outer part red.

"data:image/svg+xml;utf8,  " & EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-backspace' viewBox='0 0 16 16'>
  <path d='M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z' fill='red'/>
  <path d='M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 0 1 6.603 1zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z' fill='green'/>
</svg>
"
)

The image using this code looks as follows.

Changing the viewBox property

The viewBox property in an SVG image defines the coordinate system and how the content of the SVG should be scaled and positioned within the <svg> element. It’s stated in your svg tag as viewBox='0 0 16 16' where the first two numbers are minX and minY and define the top-left corner of the coordinate system inside the SVG. The last two numbers are width and height and define the width and height of the coordinate system. Changing these is important to make sure the animations we implement later don’t get cut off by the edges of our viewBox.

In the below images the left image has a viewBox property of viewBox='0 0 16 16' and the right one has a viewBox property of viewBox='-4 -4 24 24'. I have selected both so you can see that the padding is much bigger on the right one. This gives us the space to make the animations we want later!

Recapping on SVG images

To recap on SVG images, they provide a flexible way to implement a wide range of icons. They are more performant than .png or .jpeg images and they will provide us with the possibilities of creating animations for our buttons. Although it might seem less low-code, it will provide you with more possibilities which you can use to wow you users with! If you aren’t already using SVG images you better start using them! In the next blog I will show you how to implement CSS animations that you can use to create microtransactions to elevate your Canvas application experience.