nicht angemeldet
Hallo,
.linkbutton{ width:100%; border-top:2px solid #cccccc; border-left:2px solid #cccccc; border-bottom:2px solid #444444; border-right:2px solid #444444; background:#888888; }
.linkbutton:hover{ width:100%; border-top:2px solid #444444; border-left:2px solid #444444; border-bottom:2px solid #cccccc; border-right:2px solid #cccccc; background:#888888; }
Du kannst Farbwerte auch abkürzen: #ccc, #444, #888, etc.
Für 'Button' Effekte gibt es auch die Rahmeneigenschaften groove und ridge.
Ich versuche also mittels vertauschen der Border-definitionen eine 3d-Rahmen zu erzeugen. So weit so gut, im FF klappt das auch ganz gut, im IE fehlen dagegen schonmal oberer und unterer Rahmen :(
Mit der Breite bin ich nicht glücklich, also packe ich in meinen Link noch ein DIV, z.B:<a href="blabla.htm"><div width="200" class="linkbutton>Mein Button</div></a>
Wie gesagt, Blockelemente dürfen nicht in Inlineelemente gepackt werden. Wenn du deine Verweise 200 Einheiten breit haben möchtest gib ihnen die Eigenschaften display: block; und width. Bei width würde ich aber zu einer em statt px Angabe raten.
Im IE6 dagegen habe ich jetzt zwar korrekte Rahmen, hover funktioniert gar nicht mehr und der Cursor ändert sich beim drüberfahren zu "text". Aufs anklicken reagiert er zwar noch korrekt (blabla.htm kommt), nur nach button sieht das Verhalten echt nicht mehr aus...
Klar, IE akzeptiert :hover nur bei <a>. IE7 akzeptiert die Angabe (nur im standardkonformen Modus) für alle Elemente.
Kennt jemand eine (reine CSS-) Lösung die auch der IE6 peilt?
<a> mit den genannten Eigenschaften formatieren.
Gruß, Daniel