Всем привет, вдруг кому пригодится
создаем у себя на локальном хостинге или на удаленном файл
style.cssa.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";
}
в конструкторе main page<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>
на выходе имеем кнопки с индикацией состояния