How to change background color of button template on click?

Apps & Services HABPanel
1

Hi there,

when creating a simple button or switch in HabPanel the default behaviour is that the background color of that button changes for a short time when clicking on it. Because of this the user gets a feedback that the button was clicked, which is great.

I want to customize buttons and so am using a template to create a button, e.g.

<button style="width: 100%; height: 5em; border: 0; 
	color: {{ variable | themeValue:'widget-text-color' }}; 
	background: {{ variable | themeValue:'body-bg' }};
	font-size: 16px; line-height: 2.0;" 
	ng-click="sendCmd('av7705_send_command', 'MVUP')">
    	Vorstufe<br>
	<i class="glyphicon glyphicon-off" style="color: {{ variable | themeValue:'primary-color' }};"></i><br>
	einschalten
</button>

How can i implement a different background color of the button on click?

Best regards,
cyb

2

I tried to implement this with the background color of button:hover and button:active. This actually leads to a different background color when clicking the button. But the background color remains, because the button stays active.

I have some buttons, where the click does not change a state, e.g. the LEFT-button of a virtual remote control. How can this be realized in HABPanel? The background color should change for a short time when clicking on the button and then it should change back to normal very soon, just like a standard “switch item”.