Clickable Image Button

Question

Ich versuche, ein Bild klickbar zu machen, damit ich es als Knopf zum Herunterladen eines PDFs verwenden kann, obwohl ich das Gefühl habe, dass ich das überdenke und mich dadurch verwirre.

Ein Beispiel für den Code, den ich verwendet habe:

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

Die div id wird dann mit CSS verwendet, um das Bild anzuzeigen, wie ich auch einen Hover-Effekt, damit der Benutzer eine Art von Feedback hat wollte, wenn sie auf die Taste.

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

Jede Hilfe wäre dankbar, danke!

Answer 1

Also das Problem, das Sie gegenüberstellen, ist der Link (das <a> Tag) ist der eigentliche Knopf, aber das hat keine Größe, weil es irgendwie leer ist. Sehen Sie sich dieses Code-Snippet an. Der <a>-Tag hat einen roten Rand ringsum, aber es gibt nichts, was es füllt ...

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

Also, wenn Sie all diese Stile setzen Sie auf den <a> Tag hatten, und fügen Sie dann display: inline-block; es wird funktionieren hier sehen:

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