JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2"> </button>
<button id="secondButton" class="flatBtn2"> </button>
<button id="thirdButton" class="flatBtn2" > </button>
</div>
</div>
</body>
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;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
button {
background-image: url("http://www.chip.de/ii/7/4/3/0/5/7/7/69799fb2e3e4850e.jpg");
}
button:active, button:focus {
background-image: none;
}