Retro-Taster mit Press-Effekt

[dadoc]

Hallo zusammen,
vielleicht kann's ja mal jemand brauchen: Ich habe mir einen rechteckigen Retro-Taster mit visuellem "Druck"-Effekt gebastelt.
Eintrag in die fhem-tablet-ui-user.css:

Code Auswählen Erweitern

.pushbutton {
  width: 50px !important;
  height: 30px !important;
  font-size: 7px !important;
  margin-left: 3.5em  !important;
  margin-top: 7em  !important;
  background: radial-gradient(circle, white, #F1D8A6);
  border: solid;
  border-style: ridge;
  border-radius: 3px;
  border-width: 3px;
  box-shadow: 0 5px #999;
}

.pushbutton:active {
  background-color: red;
  box-shadow: 0 5px #666;
  transform: translateY(3px);
}

Code auf der Seite (z.B., wichtig ist class="pushbutton"):

Code Auswählen Erweitern


<div data-type="switch"
data-device="player"
data-get="volume"
data-states='["muted","!muted"]'
data-set-states='["mute","mute"]'
data-background-icons='["none","none"]'
data-icons='["oa-audio_volume_mute","oa-audio_volume_mute"]'
data-colors='["red","gray"]'
class="pushbutton">   
</div>

Grüße
Martin