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

Tips & Tricks
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