title: How to add Button over image using CSS?
body: <p>i am new in CSS so sorry if this question is just stupid or too simple but i just dont know how to do it.</p>
  
  <p>I need to place a button over the image, how it should looks:
  <img src="https://i.stack.imgur.com/Fxczw.jpg" alt="enter image description here"></p>
  
  <p>You see there a blue button  "Kopit" Thats IT! i style this thing already to my website but as one single image so my code looks like:</p>
  
  <p>CSS:</p>
  
  <pre><code>#shop{
      background-image: url("images/shop_bg.png");
      background-repeat: repeat-x;    
      height:121px;
      width: 984px;
      margin-left: 20px;
      margin-top: 13px;
  }
  
  #shop .content{    
      width: 182px; /*328 co je 1/3 - 20margin left*/
      height: 121px;
      line-height: 20px;
      margin-top: 0px;
      margin-left: 9px;
      margin-right:0px;
      display:inline-block;
  
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code> &lt;div id="shop"&gt;
        &lt;div class="content"&gt; Counter-Strike 1.6 Steam &lt;a href="#"&gt;&lt;img src="images/CSsteam.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="content"&gt; Counter-Strike 1.6 Steam &lt;a href="#"&gt;&lt;img src="images/CSsteam.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="content"&gt; Counter-Strike 1.6 Steam &lt;a href="#"&gt;&lt;img src="images/CSsteam.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="content"&gt; Counter-Strike 1.6 Steam &lt;a href="#"&gt;&lt;img src="images/CSsteam.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="content"&gt; Counter-Strike 1.6 Steam &lt;a href="#"&gt;&lt;img src="images/CSsteam.png"&gt;&lt;/a&gt;&lt;/div&gt;         
    &lt;/div&gt;
  </code></pre>
  
  <p>Is here anybody who can help me to style that button as a different element?</p>
  
  <p>Thanks a lot for reading this post.</p>