CSS styled buttons in Hype (can be disabled/enabled)

Tips & Tricks
1

I really like how you can quickly add and style buttons in Hype but for some reason the buttons cannot have attributes and I desperately need to be able to enable/disable them.

So, I started experimenting with creating and styling custom buttons with CSS. When the button is disabled it is greyed out and displays a small padlock icon. Also, it cannot be clicked so any actions assigned to it will not work unless it is enabled again. The button can have hover over effects and also include custom symbols as text.

Have a look yourself and let me know how this can be improved

CSS button.zip (55.1 KB)

Steps involved:

  1. Create an element without filling and border and edit the inner HTML by including the <button> tag with necessary attributes.

  2. Include your CSS in the <head> of the document to style your buttons. In my example buttons have two states: enabled and disabled.

  3. Enable and disable buttons with any action using the set.attribute() method.

Have fun with CSS!

1 Like
2

Can you expand on what you mean by this ..??

3

Hi Mark

Like for example I cannot disable a button with this code:

document.getElementById('button').disabled = false;

4

You should use pointer-events in the styles.

Note, Hype elements have class names that you do not see in the UI.
So if you use set attrib class on for example a Hype button or any other Hype element, you will overwrite all its classes.

If working on a Hype element use the classList and its add/remove commands.

Here is a quick edited example.

   <style>
	
.button_enabled{
  
  background-size: 0px 0px;/* not a inheritance for a hype button */ 
  
}

.button_disabled{
 

  background-position: 55px 55px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
   border: 0px; 
  cursor: not-allowed;
  pointer-events: none!important;
}

.button_enabled:hover {
  color: #26B9FF!important;
}	

</style>

Notice that we do not need to do all the reverse changes in the css ( above ) and the code ( below ).
When the class changes the inheritance takes over in some cases.

disabled code

var bt1 = hypeDocument.getElementById('button_1')
bt1.classList.add("button_disabled");
bt1.classList.remove("button_enabled");
hypeDocument.setElementProperty(bt1, 'background-image', "${resourcesFolderName}/padlock.svg")

enabled code

var bt1 = hypeDocument.getElementById('button_1')
bt1.classList.add("button_enabled");
bt1.classList.remove("button_disabled");

( note I am trying to keep you logic close to what it was rather than do a whole sale refactor. Which with things like this there will be many ways to do so )

CSS button copy.hype.zip (57.1 KB)

3 Likes
5

Thanks for sharing this Mark. I started digging into classList.