1

I'm trying to make an image clickable so that I can use it as a button to download a PDF although I feel like I'm over-thinking this and confusing myself.

An example of the code I've used:

<div id="name"><a href="file.pdf"></a></div>

The div id is then used with CSS to display the image as I also wanted a hover effect so the user has some sort of feedback when on the button.

#name {
  background-image: url('standardimage.jpg');
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name:hover {
  background-image: url('hoverimage.jpg');
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

Any help would be appreciated thank you!

Robert
  • 13
  • 1
  • 5
  • @PraveenKumar I'm not sure it's a duplicate of the question you pointed out. Here it's about changing image on hover and in the linked question it's about on click. I'd say this question is rather a duplicate of https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html – Lukasz Wiktor Jul 11 '17 at 09:18
  • @LukaszWiktor Added thanks. – Praveen Kumar Purushothaman Jul 11 '17 at 09:19
  • @PraveenKumar Apologies for the duplicate question. Both those posts don't seem to help me at all. The question isn't about the hover, I'm just explaining what I want to happen so people get a clearer idea. The problem I'm having is making the image work as a button. – Robert Jul 11 '17 at 09:53

1 Answers1

0

So the problem you are facing is the the link (the <a> tag) is the actual button but that one has no size cause it's kind of empty. See this code snippet. The <a> tag has a red border all around but there is nothing which fills it up ...

#name {
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}
<div id="name"><a href="#/path/to/file.pdf"></a></div>

So if you set all those styles you had to the <a> tag and add display: inline-block; then it will work see here:

#name a {
  display: inline-block; /* add this line */
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name a:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}
<div id="name"><a href="#/path/to/file.pdf"></a></div>
caramba
  • 21,963
  • 19
  • 86
  • 127
  • Thank you for this! What this is doing now is displaying the PDF instead of actually downloading it, do you know why this could be? – Robert Jul 11 '17 at 10:19
  • @Robert that depends on the browser and user settings for the browser. Either way though you can use the `download` attribute inside the link: See this post: https://stackoverflow.com/a/15134635/2008111 let me know if that's what you are looking for. From the question I thought it's a look only problem – caramba Jul 11 '17 at 10:53
  • I figured out the 'download' attribute just after asking my question. Thank you very much for your help - have a great day! – Robert Jul 11 '17 at 10:55
  • @Robert you're welcome! Glad it helped. Could you please mark the answer as accepted, see [here](https://meta.stackexchange.com/a/5235/213152) for more information about accepting answers and why – caramba Jul 11 '17 at 10:59