* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.button {
  display: inline-block;
  width: 100px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;		   /* De ronding */
  text-align: center;
  color: black;
  font-family: Arial, sans-serif;
  font-size: 12px;
  border: 1px solid #000;
  cursor: pointer;
  background: var(--color);
  transition: filter 0.2s;
  text-decoration: none; }

.buttonbouw {
//  composes: button;
  display: inline-block;
  width: 23px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;		   /* De ronding */
  text-align: center;
  color: black;
  font-family: Arial, sans-serif;
  font-size: 12px;
  border: 1px solid #000;
  cursor: pointer;
  background: var(--color);
  transition: filter 0.2s;
  text-decoration: none; }

.button:hover {
  outline: 2px solid red;
  box-shadow: 0 0 8px 4px #8B0000;
 }
.button:active {
  filter: brightness(1.6);
 }
.button:link, .button:visited {
  color: black;
  text-decoration: none;
  font-weight: normal; }

.buttonyellow { --color: rgb(255, 215, 0); } /*255, 215, 0*/
.buttonpurple { --color: rgb(186, 0, 186); } /*128, 0, 128*/
.buttonblue   { --color: rgb(112, 150, 213); } /*0, 128, 255*/
.buttongray   { --color: rgb(168, 167, 192); }
.buttonorange { --color: rgb(237, 167, 69); }
.buttonred    { --color: rgb(200, 43, 43); } /*174, 81, 68*/
.buttongreen  { --color: rgb(141, 161, 105); }
.buttonlemon  { --color: rgb(151, 237, 103); } /*200, 255, 100 - 164, 250, 94*/