body
{
  text-align:center;
  padding:5px;
}

.button
{
  display:inline-block;
  text-decoration:none;
  padding:5px;
  color:white;
  text-shadow:1px 1px 1px black;
  background:linear-gradient(45deg, GoldenRod, SaddleBrown);

  /* Die folgenden zwei Optionen beheben in Firefox einen Bug bei dem ganz links ein vertikaler Strich ist. Zum Testen zoomen. */
  background-position:-1px 0;
  background-size:calc(100% + 2px) 100%;

  border:2px solid GoldenRod;
}

.button:hover
{
  background:SaddleBrown;
  color:white;
}

#temperature
{
  display:inline-block;
  border:1.5px solid white;
  padding:5px;
}