Use DIV Containers as Flat Buttons with images inside

Question

I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.

Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?

Here is my first approach:

<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>

Look [here](http://stackoverflow.com/questions/15463854/pressed-button-css) — R. Schifini, Mar 03 '16 at 14:34

score 1 · Accepted Answer · answered Mar 03 '16 at 14:39

#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>

score 0 · Answer 2 · answered Mar 03 '16 at 14:43

First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.

See fiddle for a working example. I added the needed styles at the end of your css.

Hope this helps!

Use DIV Containers as Flat Buttons with images inside

2 Answers2