Clickable Image Button | 易学教程

问题

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!

回答1:

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>

来源：https://stackoverflow.com/questions/45030184/clickable-image-button

标签

html

css