button {
   background-color: hsl(var(--widget-hue),50%);
   border: 3px outset hsl(var(--fg-hue),50%);
   margin: 0px 1ex;
   outline: none;
   color: white;
   padding: 0.25ex 1ex;
   text-align: center;
/*   font-size: 16px;*/
   border-radius: 8px;
   transition-duration: 0.25s;
   cursor: pointer;
   user-select: none;
}

button:hover {
  background-color: hsl(var(--widget-hue),70%);
  border: 3px outset hsl(var(--fg-hue),70%);
  box-shadow:  1ex 1ex 2ex hsl(var(--shadow-hue),50%,0.5); /* #000000b0;*/
}

button:active {
  background-color: hsl(var(--widget-hue),85%);
  border: 3px ridge hsl(var(--fg-hue),50%);
  box-shadow:   0.75ex 0.75ex 2ex hsla(var(--shadow-hue),50%,0.5), 0 0 6ex 0.25ex hsla(var(--widget-hue),50%,0.5);
  color: hsl(var(--widget-hue),50%);
/*  font-size: 16px;*/
}


input[type="button"] {
  background-color: hsl(var(--widget-hue),50%);  /* Orange */
  border: 3px outset hsl(120,40%,50%); /* Green */
  margin: 0px 1EM;
  outline: none;
  color: white;
  padding: 0.5ex 1EM;
  text-align: center;
/*  font-size: 16px;*/
  border-radius: 8px;
  transition-duration: 0.25s;
  cursor: pointer;
}

input[type="button"]:hover {
  background-color: hsl(var(--widget-hue),60%);  /* Orange */
  border: 3px outset hsl(120,40%,60%); /* Green */
  box-shadow:  8px 12px 24px hsl(var(--shadow-hue),50%,0.5);
}

input[type="button"]:active {
  background-color: hsl(var(--widget-hue),85%); /* Orange */
  border: 3px ridge hsl(120,40%,50%); /* Green */
  box-shadow:   6px 9px 24px  hsl(var(--shadow-hue),50%,0.33), 4px 6px 16px 0 hsla(var(--widget-hue),50%,0.6);
  color: hsl(var(--widget-hue),50%);
/*  font-size: 16px;*/
}