a.button {
  display: inline-block;
  width: 100px;
  font-size: 100%;
  color: rgba(255,255,255,.9);
  text-shadow: #2e7ebd 0 1px 2px;
  text-decoration: none;
  text-align: center;
  /*line-height: 1.1;*/
  white-space: pre-line;
  padding: 5px 0;
  border: 1px solid;
  border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
}
a.button:first-line{
  font-size: 90%;
  font-weight: 700;
}
a.button:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}

.g_1 {
	position:relative;
	max-width: 40px;
	display: inline-block;
	height: 20px;
	border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
	background-image: linear-gradient(#00FF00, #008000);
	border-color: #004080;
	border: 1px solid;
    border-radius: 10px;
    left:-1px;
    content:"1";
}
.g_0 {
	position:relative;
	max-width: 40px;
	display: inline-block;
	height: 20px;
	border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
	background-image: linear-gradient(#FF0000, #800000);
	border-color: #004080;
	border: 1px solid;
    border-radius: 10px;
    left:-1px;
}

.g_0:after {
        content:"OFF";
      }
.g_1:after {
        content:"ON";
      }

<link href="http://___путь_до_файла____/style.css" rel="stylesheet">
Температура 1: <b>_DSW1_</b><br><br>
Температура 2: <b>_DSW2_</b><br><br>
<br>
<a class='button' href='?gpio=12'><div class="g__GPIO12_" style="width:50px"> </div> РЕЛЕ 1</a>
<a class='button' href='?gpio=4'><div class="g__GPIO4_" style="width:50px"> </div> РЕЛЕ 2</a><br><br>