Kleine Links klickbarer machen

Links oder andere Schaltfächen dürfen manchmal visuell nicht zu schwer ins Gewicht fallen, daher macht man sie klein. Dadurch wird aber auch die Klickfläche kleiner und somit sinkt die Benutzerfreundlichkeit. Dank eines simplen CSS-Kniffs muss das aber nicht sein:

In Social Reader lassen sich Artikel direkt im Reader lesen, wenn man den Teaser anklickt. Da ein Artikel/Item auch wieder zugeklappt werden muss, musste eine Schaltfläche her. Ich dachte mir, dass diese direkt dort erscheinen sollte, wo man das Item aufgeklappt hat, sodass man für’s Schließen nicht die Maus bewegen muss. Die Schaltfläche hierfür ist auf der ersten Blick aber nur wenige Pixel hoch, wie hier direkt unter der Überschrift des Items erkennbar ist:

Wenn man sich aber mit der Maus der Schaltfläche nähert, wird diese etwas dunkler, was deutlich macht, dass sie – naja – klickbar ist. Dieser Hover-Effekt tritt aber schon einige Pixel vor der eigentlich sichtbaren Fläche auf. Das erreicht man durch ein wenige Pixel hohen Rand der wie der Hintergrund des darunter liegenden Elements gefärbt ist. Folgende Grafik zeigt, welcher Bereich wirklich klickbar ist:

Fazit

Mit zusätzlichen „unsichtbaren“ Rändern erreicht man also eine größere Klickfläche ohne das Element selbst zu klobig darzustellen. Klar, das ist keine Neuheit oder eine Wissenschaft für sich, aber sicherlich in vielen Fällen einsetzbar um die Benutzerfreundlichkeit zu verbessern.