Webiopi多个按钮的CSS

Question

我想改变与不同颜色的按钮的背景颜色，但它有重叠的CSS最终在按钮和.bd

的Javascript：

var restart = webiopi().createMacroButton("macro", "restart", "myMacroWithoutArgs1"); 
      $("#restart").append(restart); 
      var shutdown = webiopi().createMacroButton("macro", "shutdown", "myMacroWithoutArgs2"); 
      $("#shutdown").append(shutdown); 
      var schedule_set = webiopi().createMacroButton("debug", "debug"); 
      $("#debug").append(schedule_set); 
      var back = webiopi().createMacroButton("back", "หน้าหลัก"); 
      $("#back").append(back); 

CSS：

<style type="text/css"> 
      button { 
        display: block; 
        margin: 5px 5px 5px 5px; 
        width: 160px; 
        height: 45px; 
        font-size: 24pt; 
        font-weight: bold; 
        color: white; 
      } 
      .bd{ 
      display: block; 
        margin: 5px 5px 5px 5px; 
        width: 160px; 
      height: 45px; 
      font-size: 24pt; 
      font-weight: bold; 
      box-shadow: 3px 4px 0px 0px #1564ad; 
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)); 
      background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); 
      background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); 
      background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); 
      background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); 
      background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); 
      background-color:#666666; 
      } 
    </style> 

HTML：

<div id="debug" 
onClick="self.location='debug.html'"> 
</div> 
<div id="restart"></div> 
<div class="bd" id="shutdown"></div> 
<div id="back" 
onClick="self.location='index.html'"> 
</div> 

希望任何人都能告诉我如何正确解决这个问题？ 谢谢

Answer 1

请看看这个帖子，其中有你正在寻找的代码http://www.coderewind.com/2015/10/build-a-raspberry-pi-wifi-rc-car/ 我已经在div上堆叠控件。