nicht angemeldet
Identisches Aussehen für <a> und <button> per CSS
Gunnar BittersmannHallo zusammen,
ich habe eine wirklich knifflige Aufgabe, Lob dem, der sie lösen kann:
Es geht darum, dass ein <a> Element genauso aussehen soll, wie ein entsprechendes <button> Element. Ziel ist es, dass zu den Formularbuttons auf meiner Seite ebenfalls Links definieren werden können, die genauso aussehen und sich genauso verhalten, wie der Button.
Für Blitzdenker, denen nun sofort ein <button type="button" onclick="...">Button</button> einfällt sei an dieser Stelle gleich gesagt: Das ganze muss ohne JavaScript laufen - sonst wär´s ja zu einfach für die Forumgemeinde. ;-)
Das Problem:
Das Beispiel unten sieht im Firefox schon fast perfekt aus. Der Abstand der Elemente zu den umgebenen Trennlinie ist noch nicht identisch. Das ist doof, weil es letztlich so sein soll, dass die Buttons auf einer Höhe stehen werden (könnte man aber noch durch ein vertical-align: middle einer umschließenden divs umgehen).
Schlimmer im Internet Explorer. Dieser fügt den Buttons automatisch ein padding links und rechts hinzu. Und das ist nicht mal Pixelgenau, sondern prozentual zur Textlänge. Wie bekomm ich das raus?
Bonus:
Am Ende soll es möglich sein, drei Buttons nebeneinander darzustellen. Einen links, einen zentriert und einen rechts. Ebenfalls soll man den Buttons wahlweise eine feste Breite mitgeben können. Wenn das alles zusammen realisiert wird, gibt´s ne Belohnung. :-)
Herzlichen Dank für jeden Input,
bechte
Das Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyButtons</title>
</head>
<body>
<button type="submit" class="myButton">
<span class="shadow">
<span class="content">kurz</span>
</span>
</button>
<button type="submit" class="myButton">
<span class="shadow">
<span class="content">mittellang</span>
</span>
</button>
<button type="button" class="myButton">
<span class="shadow">
<span class="content">sehr langer Button</span>
</span>
</button>
<hr />
<a href="#" class="myButton"><span class="shadow"><span class="content">kurz</span></span></a>
<a href="#" class="myButton"><span class="shadow"><span class="content">mittellang</span></span></a>
<a href="#" class="myButton"><span class="shadow"><span class="content">sehr langer Button</span></span></a>
</body>
</html>
Das bisherige CSS:
a.myButton,
button.myButton {
background: transparent;
border: none;
color: #000;
font-family: Verdana;
font-size: 10px;
font-weight: 700;
}
a.myButton,
a.myButton:active
a.myButton:hover {
text-decoration: none;
}
a.myButton { margin: 1px 0; padding: 1px 3px; }
button.myButton { margin: 0; padding: 1px 0; }
a.myButton span.shadow,
button.myButton span.shadow { border: 1px solid #000; }
a.myButton span.content,
button.myButton span.content {
background-color: #eee;
border-bottom: 1px solid #888;
border-left: 1px solid #fff;
border-right: 1px solid #888;
border-top: 1px solid #fff;
}
-
Moin!
Es geht darum, dass ein <a> Element genauso aussehen soll, wie ein entsprechendes <button> Element. Ziel ist es, dass zu den Formularbuttons auf meiner Seite ebenfalls Links definieren werden können, die genauso aussehen und sich genauso verhalten, wie der Button.
Für Blitzdenker, denen nun sofort ein <button type="button" onclick="...">Button</button> einfällt sei an dieser Stelle gleich gesagt: Das ganze muss ohne JavaScript laufen - sonst wär´s ja zu einfach für die Forumgemeinde. ;-)
<form action="linkzielseite"><button type="submit">whatever</button></form>
Funzt ohne Javascript. Wäre nur noch passend zu positionieren - und ggf. durch Hinzufügen von einem Blockelement in das <form> valide in Strict zu machen.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Hallo Sven,
<form action="linkzielseite"><button type="submit">whatever</button></form>
Funzt ohne Javascript. Wäre nur noch passend zu positionieren - und ggf. durch Hinzufügen von einem Blockelement in das <form> valide in Strict zu machen.
Es sind aber keine Links mehr. Wir hatten doch vorhin erst eine Diskussion dazu.
Meine Antwort dort könnte dem Fragesteller auch ein wenig weiterhelfen.Grüße
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!
Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
http://emmanuel.dammerer.at/selfcode.html
-
-
Hello out there!
Es geht darum, dass ein <a> Element genauso aussehen soll, wie ein entsprechendes <button> Element.
Du hast den Thread „Einen Button als Link verwenden“ im Archiv nicht gefunden?
Ziel ist es, dass zu den Formularbuttons auf meiner Seite ebenfalls Links definieren werden können, die genauso aussehen und sich genauso verhalten, wie der Button.
Geht nicht. Siehe meine Antwort in jenem Thread und beachte auch das nachfolgende Ingrid-Posting.
Für Blitzdenker, denen nun sofort ein <button type="button" onclick="...">Button</button> einfällt sei an dieser Stelle gleich gesagt: Das ganze muss ohne JavaScript laufen
Tut’s. Nur dass die Links dann im Aussehen mehr oder weniger stark von den Buttons abweichen.
Am Ende soll es möglich sein, drei Buttons nebeneinander darzustellen. Einen links, einen zentriert und einen rechts.
p {text-align: center} #foo {float: left} #bar {float: right}angewandt auf
<p><span id="foo">foo</span><span id="bar">bar</span><span id="baz">baz</span></p>Ebenfalls soll man den Buttons wahlweise eine feste Breite mitgeben können.
Dann komt halt noch dazu:
span {display: block; margin: auto; width: 42px}Wenn das alles zusammen realisiert wird, gibt´s ne Belohnung. :-)
Au fein, was gibt’s denn?
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)