Download-Link mit CSS visualisieren

Du kannst ganz einfach einen Download-Link mit CSS visualisieren. So lässt sich ein Link, der zu einem Download führt, bspw. mit einem Disketten-Symbol versehen. Der Vorteil dabei ist, dass deine Besucher direkt sehen können, dass es sich bei diesem Link um einen Download handelt.

Wie das Script aussieht, und wie du es in deine Webseite einbauen kannst, zeige ich dir in diesem Artikel.

Download-Link mit CSS visualisieren

Im Grunde genommen gibt es zwei Möglichkeiten, wie du einen Download-Link visualisieren kannst. Bei der ersten Methode, per CSS-Klasse, musst du jedoch jeden Link mit der Klassenangabe versehen. Die zweite Methode hingegen funktioniert automatisch, was jedoch alte Browser nicht umsetzen können.

Solltest du also noch viele Zugriffe von sehr alten Browsern auf deiner Seite verzeichnen, solltest du lieber zur Klassen-Variante greifen.

Visualisierung per CSS-Klasse

Per CSS-Klasse funktioniert die Visualisierung eines Download-Links wie folgt.


Beispiel:

a.download {
  background-image: url(download.gif);
  padding-right: 16px;
  background-repeat: no-repeat;
  background-position: right;
 }

Die Einbettung in den HTML Code deiner Website erfolgt dabei ganz normal:


Beispiel:

Die Datei lässt sich <a href="datei.zip" class="download">hier herunterladen</a> (2 MB).

Visualisierung mit CSS3

Einfacher ist aber die Gestaltung direkt mit CSS. Dies funktioniert jedoch erst ab CSS Version 3. Hierdurch erscheint automatisch eine Grafik neben allen Download Links.


Beispiel:

<style type="text/css">
 a[href$='.zip'] {
     padding-right: 17px;
     background: url(download.jpg) right no-repeat;
 }
 </style>

Erklärung:

Der Browser zeigt somit alle Links, die mit der Endung .zip enden, mit der Grafik download.jpg an. Die Grafik erscheint dabei 17 Pixel nach rechts versetzt vom Link.

Weitere Varianten

Ganz ähnlich kannst du so auch E-Mail-Links mit einer Grafik kennzeichnen. Prinzipiell funktioniert das oben gezeigte Beispiel dabei aber auch bei allen anderen Links. Das Snippet lässt sich also sehr variabel einsetzen.


Anzeige:


Schreibe einen Kommentar