Neon Effect Animated Buttons with CSS

In the second post in this series using HTML text boxes and CSS to create animated Power Apps buttons, I’ll demo how to dynamically change the button color by adding a variable into the inline CSS

Animated Buttons

Start by inserting a HTML text box and adding the HTML & inline CSS below. For more detail on exactly how to do this please see the earlier post ‘Beautiful Buttons with CSS’

"<div style=""
height:199px;
border-radius: 30px, 30px, 30px, 30px;
background: linear-gradient(0deg," & "red" & "," & "RGB(255," & varGreen & ",0)" & "," & "red" & "," & "red" & "," & "red" & "," & "RGB(255," & varGreen & ",0)" & "," & "red" & ");
""</div>"

RGB(255,0,0) is Red and you can see the linear-gradient has 7 tiers. Tiers 1, 3, 4, 5 & 7 are all just straight Red. Tiers 2 & 6 contain the variable varGreen that transitions the value of the Green/G element to change the color of these two tiers

The next stage is to add a timer with the following properties and define the value of the varGreen variable

Set the timer Duration property to 50 (a 20th of a second)
Set the timer Repeat property to true

Add the following into the OnEnd property of the timer:

UpdateContext({varCounter:varCounter + 1});
UpdateContext({varGreen:Round((765+255*Sin(varCounter/10))/4,0)})

The Sin (Sine) formula calculates the radian equivalent of its subject value which always returns a value between -1 and 1, the subject in this case is the simple counter on the previous line. Much more detail on how the Sin formula works available in the earlier post – Button Animation with CSS

The result is multiplied by 255. Then 765 is added and then the result is divided by 4 (which changes the range so the value oscillates between 128 and 255)

The Round formula then rounds the value to the nearest whole number removing the decimals and the result is applied to the variable varGreen

Every 50 milliseconds, the value of varCounter increments by one and a new value for varGreen is calculated

We now overlay a button on top of the HTML box and ensure the size including the four BorderRadius properties matches the HTML text box exactly. Make the button Fill transparent and the BorderColor black. Assign the Color property (the color of the button text) to be RGBA(255,varGreen,0,1. And finally make the HoverColor to be white

Run the app and manually start the timer and the result is shown below

Now it can be seen why we wanted the value of varGreenSlider to have a minimum value of 127, it’s to ensure that the Yellow text and 2nd and 6th tier never completely disappear from view

To have the button animation run when the page is loaded, set a Boolean variable to be true via the OnVisible property of the screen and use this variable to start the timer via the timer’s Start property. The timer will stop automatically if you navigate away from the page and on returning to the page the OnVisible Boolean variable will start the timer again

Don’t forget, HTML Text boxes have Height, Width, X & Y properties just like any other control so you can make them fully responsive

As with the other CSS buttons I’ve demonstrated on earlier posts, there is enormous scope to build custom buttons through changing the colors, timer duration or using multiple variables. The only limit is your imagination!