How to add Button over image using CSS?

Question

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.

I need to place a button over the image, how it should looks: enter image description here

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:

CSS:

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

}

My HTML:

 <div id="shop">
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>         
  </div>

Is here anybody who can help me to style that button as a different element?

Thanks a lot for reading this post.

Well, apart from CSS you will need a button in the first place. Currently, there is a link surrounding the entire image. Is that you intention, that the whole image is clickable? Or just the button? — GolezTrol
– GolezTrol, Commented Apr 23, 2014 at 7:52
I try something like: #shop .buybutton{ background-color: #2d79bd; width:58px; height:22px; } — user258459
– user258459, Commented Apr 23, 2014 at 7:52
Yes, but you need an element with class buybutton in the html for that to work. A website isn't just CSS. CSS just adds a style to the existing elements. To make a red chair, you don't need just red paint, you also need a chair. CSS is just the paint. — GolezTrol
– GolezTrol, Commented Apr 23, 2014 at 7:54
Ofc mate i had it in HTML as well but it just didnt work as i want so i delete it to not confuse ppl who try to help — user258459
– user258459, Commented Apr 23, 2014 at 8:04

TryingToImprove · Accepted Answer · 2014-04-23 07:56:05Z

28

If I understood correctly, I would change the HTML to something like this:

<div id="shop">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <a href="#">Counter-Strike 1.6 Steam</a>
    </div>
</div>

Then I would be able to use position:absolute and position:relative to force the blue button down.

I have created a jsfiddle: http://jsfiddle.net/y9w99/

answered Apr 23, 2014 at 7:56

TryingToImprove

7,4555 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlexPrinceton · Accepted Answer · 2014-04-23 07:57:18Z

13

Adapt this example to your code

HTML

<div class="img-holder">
    <img src="images/img-1.png" alt="image description"/>
    <a class="link" href=""></a>
</div>

CSS

.img-holder {position: relative;}
.img-holder .link {
    position: absolute;
    bottom: 10px; /*your button position*/
    right: 10px; /*your button position*/
}

answered Apr 23, 2014 at 7:57

AlexPrinceton

1,20310 silver badges12 bronze badges

Comments

W.D. · Accepted Answer · 2014-04-23 08:13:58Z

You need to give relative or absolute or fixed positioning to your container (#shop) and set its zIndex to say 100.

You also need to give say relative positioning to your elements with the class content and lower zIndex say 97.

Do the above-mentioned with your images too and set their zIndex to 91.

And then position your button higher by setting its position to absolute and zIndex to 95

See the DEMO

HTML

<div id="shop">

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

  </div>

CSS

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
    position:relative;
    z-index:100
}

#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;
    position:relative;
    z-index:97

}

img{

    position:relative;
    z-index:91

}

.span{

    width:70px;
    height:40px;
    border:1px solid red;
    position:absolute;
    z-index:95;
    right:60px;
    bottom:-20px;

}

the Hutt · Accepted Answer · 2022-05-20 04:39:32Z

2

I like TryingToImprove's answer. I've essentially taken his answer and simplified it down to the barebones css to accomplish the same thing. I think it's a lot easier to chew on.

.content {
  display: inline-block;
  position: relative;
}

.content a {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

<div class="content">
  <img src="http://unsplash.it/182/121" />
  <a href="#">Counter-Strike 1.6 Steam</a>
</div>

edited May 20, 2022 at 4:39

the Hutt

18.5k2 gold badges19 silver badges50 bronze badges

answered Nov 4, 2017 at 17:20

Joseph Cho

4,2444 gold badges29 silver badges36 bronze badges

Comments

Tejinder · Accepted Answer · 2014-04-23 08:11:43Z

0

<div class="content"> 
  Counter-Strike 1.6 Steam 
     <img src="images/CSsteam.png">
     <a href="#">Koupit</a>
</div>

/*Use this css*/
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;
position:relative;
}
content a{
display:inline-block;
padding:10px;
position:absolute;
bottom:10px;
right:10px;
}

edited Apr 23, 2014 at 8:11

answered Apr 23, 2014 at 7:59

Tejinder

112 bronze badges

Collectives™ on Stack Overflow

How to add Button over image using CSS?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related