使用DIV容器作爲帶有圖像的平面按鈕

我想在頁面頂部創建一個按鈕欄，其中包含圖像的div容器將它們用作平面按鈕。我的問題是我無法正確對齊。使用DIV容器作爲帶有圖像的平面按鈕

是否還有一種突出顯示最後單擊按鈕的方法，以便您可以在不使用JavaScript的情況下查看按鈕欄上的哪個按鈕處於活動狀態？

這是我的第一種方法：

<html> 
    <head> 
     <title> 
     </title> 
     <style> 
      #top { 
       position: fixed; 
       background-color: #AAA; 
       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent)); 
       background-image: -webkit-linear-gradient(top, #fff, transparent); 
       background-image: -moz-linear-gradient(top, #fff, transparent); 
       background-image: -o-linear-gradient(top, #fff, transparent); 
       background-image: linear-gradient(to bottom, #fff, transparent);    
       left: 0px; 
       top: 0px; 
       width: 100%; 
       height: 60px; 
       padding: 0px; 
       border: thin solid rgba(0,0,0,0.6); 
       color: #444444; 
       font-family: Droid sans, Arial, Helvetica, sans-serif; 
       font-size: 12px; 
       cursor: pointer; 
       -webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px; 
       -moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px; 
       box-shadow: rgba(0,0,0,0.5) 3px 3px 10px; 
      } 

      .flatBtn2 { 
       height: 50px; 
       width: 50px; 
       margin-left: 5px; 
       margin-top: 5px; 
       float: left; 
       display: inline; 
      }   

      .flatBtn2:hover { 
       background-color: #eee; 
       height: 50px; 
       width: 50px; 
       margin-left: 5px; 
       margin-top: 5px;    
       float: left; 
       display: inline; 
      }  

      .buttonBar { 
       float:left; 
      }   

     </style> 
    </head> 
    <body> 
     <div id="top"> 
      <div id="selectReiter" style="display:inline" class="buttonBar"> 
       <div id="firstButton" class="flatBtn2" /> 
       <div id="secondButton" class="flatBtn2" /> 
       <div id="thirdButton" class="flatBtn2" /> 
      </div> 
     </div> 
    </body> 
</html>

來源

2016-03-03 Björn Karpenstein

Look [here]（http://stackoverflow.com/questions/15463854/pressed-button-css） –

#top { 
 
      position: fixed; 
 
      background-color: #AAA; 
 
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent)); 
 
      background-image: -webkit-linear-gradient(top, #fff, transparent); 
 
      background-image: -moz-linear-gradient(top, #fff, transparent); 
 
      background-image: -o-linear-gradient(top, #fff, transparent); 
 
      background-image: linear-gradient(to bottom, #fff, transparent); 
 
      left: 0px; 
 
      top: 0px; 
 
      width: 100%; 
 
      height: 60px; 
 
      padding: 0px; 
 
      border: thin solid rgba(0, 0, 0, 0.6); 
 
      color: #444444; 
 
      font-family: Droid sans, Arial, Helvetica, sans-serif; 
 
      font-size: 12px; 
 
      cursor: pointer; 
 
      -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px; 
 
      -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px; 
 
      box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px; 
 
     } 
 
     
 
     .flatBtn2 { 
 
      height: 50px; 
 
      width: 50px; 
 
      margin-left: 5px; 
 
      margin-top: 5px; 
 
      float: left; 
 
      display: inline; 
 
      background-color: transparent; 
 
      border: none; 
 
     } 
 
     
 
     .flatBtn2:hover { 
 
      background-color: #eee; 
 
      height: 50px; 
 
      width: 50px; 
 
      margin-left: 5px; 
 
      margin-top: 5px; 
 
      float: left; 
 
      display: inline; 
 
     } 
 
     
 
     .flatBtn2:focus { 
 
      background-color: #eee; 
 
     } 
 
     
 
     .buttonBar { 
 
      float: left; 
 
     }

<div id="top"> 
 
    <div id="selectReiter" style="display:inline" class="buttonBar"> 
 
    <button id="firstButton" class="flatBtn2" >Button 1</button> 
 
    <button id="secondButton" class="flatBtn2" >Button 2</button> 
 
    <a id="thirdButton" href="#" class="flatBtn2">A 3</a> 
 
    </div> 
 
</div>

來源

2016-03-03 14:39:21 NiZa

首先，如果你要使用按鈕，那麼你應該你<button>標籤，並通過CSS添加背景圖片。你也可以在CSS中操縱狀態，你在搜索的是:focus和:active，所以你有兩個按鈕的規則。正常的按鈕規則與主背景圖像和其他規則button:focus, button:active您可以加載其他圖像或做別的事情。

查看fiddle的工作示例。我在你的CSS結尾添加了所需的樣式。

希望這會有所幫助！

來源

2016-03-03 14:43:43 Roman

使用DIV容器作爲帶有圖像的平面按鈕

回答

相關問題