How to use HTML to create new button styles

In the previous post I explained how to use CSS animations to create micro interactions for your users. These can signal to them that they have selected a button or that they are not allowed to continue with their action due to lack of privileges, for instance.

Although you have the SVG image and the animation, it doesn’t look like a button yet. Let’s look into the final part of our button creation to create that button look and feel. I am definitely not the first doing this and I would advice you to take a look at Kristine’s blog for a fantastic detailed look into HTML styling for buttons. But, there are some things that I want to give a long as tips when it comes to scaling your button that could help you. Let’s start!

Adding a HTML layer to our SVG image

In the previous post we created an SVG image with animations. Now we need to make it look like a button. We have the below code to create the image we want. In the OnSelect property of this SVG image we have Set(varTimeStamp, Text(Now(), ““)) to make the animation happen.

"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'>
<style>
.animate"&varTimeStamp&" {
animation-name: shake;
animation-duration: 1.5s;
animation-fill-mode: both;
}
@keyframes shake {
0, 100% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-5px, 0, 0); }
50% { transform: translate3d(5px, 0, 0); fill: red }
75 { transform: translate3d(-5px, 0, 0); }
}
</style>
<path class = 'animate"&varTimeStamp&"' 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>" )

Let’s start of with a normal container to house our SVG image in. In that container we’re going to build up the necessary controls to create the button. Normally you’re buttons are going to be between 50 and 100 pixels in width and height. For visibility purposes, let’s make the container 100 pixels wide and 100 pixels high so we can see what we are doing. Also remove the drop shadow and border radius from your container if there is any. This will give us the following container.

Then, add your SVG image to this container. Since we want to be able to resize only the container and not all separate components in the container we need to resize the SVG image according to the container. Therefore, change the following properties of your image control to the listed values.

Now, resizing your container will automatically scale your SVG image accordingly. With this current viewbox you cannot go much smaller than 50 pixels on the height and width of your container. If you want to go smaller you will need to adjust the viewBox.

Adding the HTML control

Now let’s add the HTML control to add some additional styling. We’ll start with a standard background and we’ll add more techniques. To start our HTML code we add some div tags. Don’t forget to add style to your starting tag. We add double apostrophes around the code to make this work in the HtmlText property.

"<div style =''>

</div>"

Within this block we are adding our styling. Let’s start with the width and height.

"<div style =
'
width: 50px;
height: 50px;
'>
</div>"

Now let’s add some background color so we know with what we are working.

"<div style =
'
width: 50px;
height: 50px;
background: blue;
'>
</div>"

Then let’s add this to our container.

That doesn’t look so nice yet. Let’s move the Html control to the back. And make it a little bit more responsive. We do this in two steps.

1. Adjust the width and height in the HTML code.

2. Adjust the width and height of the HTML control.

First, let’s adjust the width and height of the HTML code. If we add a dollar sign to the start of our HTML code we can concatenate a little easier and keep the code cleaner. More information about dollar sign string concatenation can be found in this awesome blog post by Matthew Devaney. The trick now is to make the HTML code width and height the same as the control. We do that by referencing the control itself using the Self. function. See below the result.

$"<div style =
'
width: {Self.Width}px;
height: {Self.Height}px;
background: blue;
'>
</div>"

Be sure to remove all the padding from the HTML control now. Then we adjust the HTML control to make it the same size as the container, because the container is our final size reference. We use Parent.Width and Parent.Height for this. Thus, the properties of the HTML control width and height are the same as its parent.

Now unfortunately we still have a scroll bar in our HTML control.

We get rid of that by deducting one pixel of our height.

$"<div style =
'
width: {Self.Width}px;
height: {Self.Height - 1}px;
background: blue;
'>
</div>"

Now we still have to add some border radius. We do that by adding the border-radius property. For each corner we will add the amount of pixels that the border radius needs to cover. We make this 140 pixels for each corner. Since this will give us the option of making the button much bigger if we want to.

$"<div style =
'
width: {Self.Width}px;
height: {Self.Height - 1}px;
background: blue;
border-radius: 150px 150px 150px 150px
'>
</div>"

Lastly we add our own custom color to the background to make it in line with our own styling. You can add nfPrimaryColorHex = “#FFA500”; to your the Formulas property of your App or change it to any other color you want to use.

$"<div style =
'
width: {Self.Width}px;
height: {Self.Height - 1}px;
background: {nfPrimaryColorHex};
border-radius: 150px 150px 150px 150px
'>
</div>"

At this point we basically have a button we can use. And we can make it bigger if we want to by increasing the size of our container. Or we can make it different shapes. Use this if this suits your needs!

Adding a box shadow

Finally, we want to add a box shadow to make our button pop out a little. We can use the box-shadow property for this. The box-shadow property takes the following parameters: box-shadow: horizontal-offset vertical-offset blur spread color. And then there is inset, initial and inherit of which we are going to use inset. Now if we just add box-shadow: 2px 4px 4px we get a box shadow that gets cut off from the edge of our image again.

We are going to have to use the margin property to make sure the box-shadow stays within the image width and height values. Adding a margin with the margin: property will create another scrollbar in our HTML control.

We are going to have to adjust for this and make it dynamically scalable. I found that multiplying the width, margin and height with Self.Width and Self.Height using the below values will make your button scalable and will make sure the box shadow stays in the right spot. At this point you should be able to decrease the size to 40 pixels width and height or increase the size to 200 pixels width and height without seeing a scrollbar.

$"<div style =
'
width: {Self.Width * 0.7259595959}px;
height: {Self.Height * 0.7059595959}px;
background: {nfPrimaryColorHex};
border-radius: 140px 140px 140px 140px;
box-shadow: 2px 4px 4px;
margin: {Self.Height  * 0.14}px;
'>
</div>"

With the following result.

No the last thing we have to do is make sure the box shadow changes to inset when we press it. Therefore, we are going to create a local variable and place the initialization of this variable on the OnSelect property of the image. Use the following code for that: UpdateContext({locPressedButton: !locPressedButton}). Then use the following code on your box-shadow property: {If(locPressedButton, "2px 4px 4px", "inset 2px 2px 4px")}. Since the color of the box shadow is very black now let’s add some softer tones by adding the following RGBA color code to our box shadow parameters: rgba(0, 0, 0, .75). The end result of your HTML code should look like this.

$"<div style =
'
width: {Self.Width * 0.7259595959}px;
height: {Self.Height * 0.7059595959}px;
background: {nfPrimaryColorHex};
border-radius: 140px 140px 140px 140px;
box-shadow: {If(locPressedButton, "2px 4px 4px rgba(0, 0, 0, .75)", "inset 2px 2px 4px rgba(0, 0, 0, .75)")};
margin: {Self.Height  * 0.14}px;
'>
</div>"

And your button should look like this.

Ending notes

You can make adjustments to the box shadow where needed. I hope you have a clear understanding how you can use the HTML component to make nicer custom Canvas applications for your users. Don’t forget that once you have created this you can easily copy paste this code and reuse it in other applications as well. Let me know if this was helpful! Next issue we’ll incorporate a very custom onHover property for use on a desktop.