CSS Resources

button over image:

<div class="img-wrapper">
    <img class="img-responsive" src="your_image_goes_here">
    <div class="img-overlay">
      <button class="btn btn-md btn-success">Button</button>
    </div>
</div>

.img-wrapper {
  position: relative;
 }

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 70%;
}

.btn-ona { 
  color: #FFF;
  font-size: 180%;
  font-family: 
  #text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
  background:#91ca69;
  #background-image: linear-gradient(to bottom, #91ca69, #91ca69);background-repeat: repeat-x;
  border-color: #006b4e #006b4e rgb(0, 53, 65) 
}

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

"btn-group" - the buttons inside will stretch to the same size as the largest button

<button class="btn btn-primary btn-block">Save</button>

.btn-block expands to the parent's width