CSS Buttons erstellen - sexy!
In seinem wunderbaren CSS Tutorial How to make sexy buttons with CSS erläutert Alex Griffioen wie man Buttons mittels der sliding doors Technik erstellen kann.
Ich habe mich nun dran gesetzt um das Tutorial auf deutsch zu übersetzen und das ganze ein wenig zu erweitern, bzw. auf einige Feinheiten hinzuweisen, die mir in die Quere kamen.
Die Dateien können am Ende des Tutorials heruntergeladen werden.
Das Tutorial erklärt, wie auf einfache Weise, gut aussehende Text Buttons mit optischem Klick-Status per CSS realisierbar sind. Die Buttons funktionieren ohne Javascript zum vorausladen der Bilder und passen sich automatisch der Größe ihres Inhalts an. Ich denke diese Technik wird noch zu selten genutzt, obwohl sie so schlank und extrem nützlich ist, hier ein Beispiel, was wir erreichen möchten:
Sliding Doors Technik
Selbstverständlich sollen unsere Buttons flexibel sein, egal wie lang die Beschriftung sein mag, der Button muss sich automatisch anpassen, auch bis zu einem bestimmten Grad der Schriftvergrößerung. Dies realisieren wir mittels der sliding doors Technik, zwei einzelne Bilder, die mittels CSS so positioniert werden, das es aussieht, als wäre es ein Hintergrundbild.
Unsere Buttons bestehen aus einem <a> Tag in das wir ein zusätzliches <span> Element einbetten, beide dieser Tags erhalten ein separates Hintergrundbild. So simpel sieht dann ein normaler Button in HTML aus:
<a class="button" href="#"><span>Test Button</span></a>
Nichts sonderlich spektakuläres, oder? Nun brauchen wir noch ein bisschen was fürs Auge, einmal für den normalen und einmal für den angeklickten Status, vielleicht sowas in der Art:
Um das vorausladen des Hintergrundbildes intelligent und vor allem ohne unnötigen Javascript zu realisieren, betten wir alle Zustände unserer Grafik in ein Bild ein. Um im folgenden dann den Klick-Status anzuzeigen, wird die Hintergrundgrafik einfach ein Stück nach oben verschoben, alles per CSS gesteuert. Um die sliding doors Technik anzuwenden, brauchen wir zwei einzelne Stücke der Grafik, den Teil für die linke Seite, welche sich hinter dem Text erstreckt, legen wir in 300px Breite an, um auch bei vergrößertem Text noch einen durchgehenden Button zu erhalten. Die Höhe des Ganzen legen wir auf später sichtbare 24px fest.
CSS Styling der Buttons
So, jetzt ein bisschen CSS um das ganze zu vervollständigen. Alex Griffioen entschied sich in diesem Falle dazu, die Buttons von vornherein links zu floaten, denn meist werden Buttons nicht allein auftreten, sondern etwa zu einem Kontaktformular oder sonstigem gehören, bei dem mehrere Buttons von Nöten sind.
Dem stehe ich vorerst ein wenig skeptisch gegenüber, denn dadurch ist zusätzliches Markup im Quelltext nötig um die Floats zu beenden.
Zudem setzt er alle Werte in px, dies führte im Beispiel meiner Seite zu Rundungsfehlern, denn ich gebe Schriftgrößen in em an und lege meinen Zeilenabstand in % fest.
.clear { /* Container (z.B. div) für floatende Buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url(bg_button_a.gif) no-repeat top right;
font: normal 12px arial, sans-serif;
color: #666!important;
display: block;
float: left;
height: 24px;
margin-right: 6px;
padding-right: 18px; /*sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url(bg_button_div.gif) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Achtung: Das vertikale padding des <span> Elements muss einen Wert von (5+5) und einen Zeilanabstand von (14px) haben um auf die 24px Gesamthöhe des Buttons zu kommen. Möchte man ein anderes padding verwenden, so verändert sich auch der Zeilenabstand,
So, die Buttons sind nun schon sehr schick, es fehlt allerdings noch die Anpassung der Optik, sobald ein Button angeklickt wird. Also noch ein wenig CSS:
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* die gepunktete Linie im FF abschalten */
}
a.button:active span {
background-position: bottom left;
color: #000!important;
padding: 6px 0 4px 18px; /* Text 1px nach unten verschieben */
}
Mir persönlich fehlte nun noch ein :hover um dem User deutlicher zu zeigen, das der Button »getroffen« wird.
a.button:hover {
text-decoration: none;
color: #000!important;
}
Achtung: Ich habe einige Farbangaben für die Button-Beschriftungen mit !important Angaben versehen, denn diese werden sonst oftmals von der CSS Kaskade überschrieben, falls globale Angaben für Linkfarben und Auszeichnungen verwendet werden.
Sehr schön, klicken Bitte:
Der IE mag uns wie immer nicht
Der IE versteht das :active im CSS nicht und setzt nach dem Klick den Status des Buttons nicht auf den Normalzustand zurück, das wollen wir natürlich nicht. Darum müssen wir an dieser Stelle ein kleines bisschen Javascript einsetzten:
<a class="button" href="#" onclick="this.blur();"><span>Test Button</span></a>
Um z.B. Formulare mittels unserer Buttons abzusenden, müssen lediglich zusätzliche Angaben in den onclick Befehl geschrieben werden.
Achtung: Wie schon an anderer Stelle bemerkt, passen sich die Buttons leider nur in der Breite an.
So, ich hoffe das Ganze ist leicht nachzuvollziehen!
Alex Griffioen und ich freuen uns natürlich über Feedback und Anwendungsbeispiele!
Frank Helmschrott said,
Mai 9, 2007 @ 19:19
Sehr feines Tutorial - kurz und dennoch alles drin. Vielen Dank!
*gewongt*
Leif said,
Mai 10, 2007 @ 06:20
Sehr schöne Technik und sehr simpel einzusetzen. Das Einzige was mir aufgefallen ist: Wenn man man die Maustaste gedrückt hällt und dann den Cursor aus dem Button bewegt bleibt dieser gedrückt.. Sowohl in Firefox wie auch im IE. Natürlich ist dies nicht weiter schlimm, werde die Technik garantiert benutzen!
Blogpotato » Blog Archive Das button-Dilemma » said,
Mai 10, 2007 @ 08:18
[…] [update]: Sexy CSS Buttons fällt da gerade aus meinem Feedreader bzw. aus den Sidenotes von Wolfgang Bartelme. Sagen wir es mal so: Mit normalem Markup kann ich das auch (was nicht heißen soll, das button unnormal ist, es ist eben aber eine Tretmineein Formularelement). […]
Webstandard-Team said,
Mai 10, 2007 @ 08:49
Super Fleissarbeit und die Art der Anwendung für grafische Button ist wirklich zu empfehlen.
marc thiele said,
Mai 10, 2007 @ 09:38
Hi,
danke dir für die Mühe!
Gruß,
marc
Jörg, einfach-persoenlich said,
Mai 10, 2007 @ 17:36
Nett zu lesen, dass es das Tutorial bei Dir nun auch deutsch zu lesen gibt. Die Button sind in der Tat sexy anzusehen und passen sich wunderbar an.
Den Hover-Effekt werde ich bei der nächsten Integration auch in etwas abgewandelter Form einbauen. Hat mir gut gefallen. Bookmark!
Marcus said,
Mai 10, 2007 @ 22:19
Ich überlege gerade, ob ich die Buttons nicht am Wochenende leicht mit einbaue. Hmm….
ConnyLo said,
Mai 11, 2007 @ 09:38
Na Klasse und Danke für diese Seite (und ich mit meinem schwachen Englisch hatte schon ein Wochende fürs Nachbauen eingeplant)!
Die Früchte dieser Übersetzung bekommen meine Screendesign-Schüler bald zum Ausprobieren präsentiert ;–))
Flip Stwart said,
Mai 11, 2007 @ 21:25
This was very informative! I’m lucky you presented everything the way you did as English is my only language, but this was easy to understand regardless! Thanks!
Botones atractivos mediante CSS « Cosas sencillas said,
Mai 13, 2007 @ 19:09
[…] Botones atractivos mediante CSS En INFECTED FX, tenemos un tutorial que aunque está en alemán Keasone , es claro de entender, para crear unos botones por medio de CSS bastante atractivos usando una técnica similar a las pestañas de Sliding Doors of CSS de A List Apart. […]
aloha WEBLOG - spreading the aloha spirit » links for 2007-05-10 through 2007-05-14 said,
Mai 15, 2007 @ 02:37
[…] keasone.de | finest screen graphics » CSS Buttons erstellen - sexy! […]
Marcel said,
Mai 16, 2007 @ 18:23
Danke für die deutsche Version. Hatte zwar schon die englische gelesen, aber wiederholen kann ja nicht schaden
Marcel
einfach persoenlich Weblog said,
Mai 17, 2007 @ 12:07
Sexy CSS & Webdesign Styling…
Wenn man wenig gekonnt einsetzt, dann kann das sehr sexy wirken. CSS 6 Webdesign Styling kann unter Beachtung dieser Erkenntnis wirklich sexy ausschauen, wie ein CSS-Tutorial beweist. Das Auge isst mit. Das gilt ebenso für CSS & Webdesign. We…
Arne said,
Mai 17, 2007 @ 21:42
Naja, das Problem ist und bleibt, dass sie nicht in die Höhe mitskalieren. Da nützt das Sliding wenig.
Alexander Hahn said,
Mai 17, 2007 @ 22:12
@Arne Das hatte ich ja oben schon erwähnt und bedauert.
Das Sliding nutzt in soweit etwas, da man eine extrem selten so stark vergrößert, das es in der Höhe zu echten Problemen kommt.
Jörg Petermann said,
Mai 18, 2007 @ 07:19
@Arne: Immer wieder die eierlegenden Wollmilchsäue?
Einfach hinsetzen und eine bessere Lösung austüfteln, statt immer nur anderen den schwarzen Peter zuzuschieben. Ich denke, dass es langsam einmal Zeit ist, auch das Engagement von Alexander zu würdigen und bezüglich weiterer Lösungen um-zu-denken!
jez said,
Mai 18, 2007 @ 08:03
sieht gut aus, danke!
Manuela said,
Mai 18, 2007 @ 08:42
Die Technik ist gut nur eben unverträglich mit vier abgerundeten Ecken, zwei wären gar kein Problem oder eine abgerundete Kante, eine abgeknickte Ecke … Auf jeden Fall kann man dann die Hintergrundgrafik höher anlegen oder eine Farbe für den Hintergrund verwenden und hat dann auch kein Problem mehr mit abgeschnittenen Höhen.
Alexander Hahn said,
Mai 18, 2007 @ 10:51
@ Jörg - tausend dank, alles kein Problem, ich freue mich wenn Leute kritisch sind, jedenfalls, wenns zu neuen Lösungen führen kann (-;
@ Manuela - Du triffst es auf den Punkt. Ich werde die Tage mal einen zweiten Teil schreiben, bei dem ich das ganze mit ner abgeknickten Ecke oder ähnlichem aufzeige, einfach als kleine alternativ Variante.
__
ps: wie gesagt, ich hab das Ganze vorerst nur übersetzt und ein bisschen drüber nachgedacht…
Jörg Petermann said,
Mai 18, 2007 @ 12:36
Manuela hat den Finger schon wieder mal auf der richtigen Stelle. Beim Weiterdenken wird es nämlich erst interessant.
Bei abgeknickter Ecke denke ich an zwei diagonal gegenüberliegende Ecken…
Finde es super, wenn die kreativen Bälle übers Netz fliegen. Dann haben alle etwas von.
)
Manuela said,
Mai 22, 2007 @ 21:42
Roger Johansson hat mit sehr viel Markup eine funktionierende und schicke Version gestaltet: Creating bulletproof graphic link buttons with CSS.
Alexander Hahn said,
Mai 23, 2007 @ 00:27
@Manuela: Danke für den Hinweis!
An solche Geschichten hatte ich auch schon gedacht, aber das endlose Markup hatte mich dann relativ schnell wieder von der Überlegung abgebracht (-;
Allerdings bookmarke ich mir das Ganze dann doch mal schnell, denn vielleicht kommt man ja mal an einer
Stelle nicht drumherum - dann ist auch das Markup zu verkraften, wenn man ein solides Ergebniss bekommt.
Jörg, einfach-persoenlich said,
Mai 30, 2007 @ 12:44
Hier noch zwei Links, die thematisch zum Thema passen:
Styling the Button Element with Sliding Doors
Rediscovering the Button Element
Zuviel Markup wie in Roger seinem Beispiel finde ich nicht gut. Weniger ist hier mehr, zumindest auch für meinen Geschmack.
Der Korsti bloggt. said,
Mai 31, 2007 @ 22:01
Skalierbare Buttons mit abgerundeten Ecken…
Vor rund drei Wochen stellte Alexander Hahn mit der deutschen Übersetzung des Artikels „How to make sexy buttons with CSS“ eine Methode vor, wie man mithilfe der sliding doors Technik abgerundete Buttons plus nettem Hover-Effekt erstellen kan…
jonas said,
Mai 31, 2007 @ 23:15
Super, Danke !!!
» Buttons, Buttons, Buttons — cne _LOG Archiv said,
Juni 1, 2007 @ 13:42
[…] Oft verwendet wird in diesem Zusammenhang auch die Sliding-Doors-Technik von Douglas Bowman, die auch Alex Griffioen in seinem Artikel “How to make sexy buttons with CSS” nutzt. Mittlerweile ist der Artikel auch auf Deutsch erschienen und bei Alexander Hahn auffindbar: “CSS Buttons erstellen - sexy!”: […]
Alexandra said,
Juni 1, 2007 @ 20:13
Vielen Dank fürs Übersetzen und Weiterdenken!
Webkrauts » Headline Elemente mit CSS stylen said,
Juni 3, 2007 @ 14:27
[…] Bei der Gestaltung moderner Webseiten stellt der richtige Einsatz von Headlines einen wichtigen Aspekt dar. Nach der Wahl eines passenden <h>-Elementes, beschränkt sich das Styling mit CSS meist auf Font, Farbe und Größe der Headline. Was darüber hinaus möglich ist, zeigt Alexander Hahn in diesem Praxis-Artikel. Ich habe unzählige Anregungen zu meinem Beitrag über die Formatierung einfacher CSS Buttons mit der sliding doors Technik bekommen, daraufhin begann ich über ansprechende Formatierungen von Überschriften nachzudenken, welche auf einfache Weise auch auf andere Elemente angewendet werden können. […]
mk0711 said,
Juni 22, 2007 @ 15:45
Sehr schön, diese Buttons!
Ich habe das Ganze mit drei Zuständen nachgebaut. Für den Hover-Zustand habe ich dann im Stylesheet die Background-Position mit “center” angegeben und für active “bottom”. Die Grafik besteht in diesem Fall eben aus drei untereinander angeordneten Buttons. Funktioniert Prima.
Danke & Gruß
tommi trinkaus said,
Juni 29, 2007 @ 15:31
Besten Dank - genau nach sowas hatte ich gesucht!
Alfons said,
August 25, 2007 @ 10:42
Toll…
Aber wie bekommt man diesen Button in eine horizontal zentrierte Position ? Schon klar, es liegt am “float:left”.
Gibt es überhaupt eine Möglichkeit, den Button vom linken Rand zu einer zentrierten Position wegzubewegen ?
Alexander Hahn said,
August 25, 2007 @ 17:33
@Alfons:
Hast du mal getestet das beinhaltende Element auszurichten?
Also, z.B. mit text-align:center ?
feinste Grüß, sorry, bin grade in nem Projekt verwickelt, sonst könnte ich näher drauf eingehen.
Alfons said,
August 25, 2007 @ 20:56
@Alexander:
Ja, hab ich.
Ich habe es mit einem drum herumliegenden DIV probiert.
Der float:left, so sieht es für mich aus, hebt den text-align:center des “beinhaltenden” Containers auf.
background-image beim Button funktioniert im IE7 nicht - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign) said,
August 30, 2007 @ 12:36
[…] AW: background-image beim Button funktioniert im IE7 nicht - Heute, 12:36 keasone.de | finest screen graphics » CSS Buttons erstellen - sexy! Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.12) Gecko/20070731 Ubuntu/dapper-security Firefox/1.5.0.12 #GeorgeWBush{position:absolute;bottom:-6ft;} Es gibt Menschen, die hat der Liebe Gott halt erst kurz vor Feierabend gemacht! […]
Andy said,
September 27, 2007 @ 11:40
Suuper cool die Buttons so zu gestalten. Betreffend Skalierbarkeit gibts hier sicher was interessantes dazu
http://www.monc.se/kitchen/stew/buttons/btn.html
Greets
René said,
Oktober 2, 2007 @ 10:52
Sehr schöne Buttons, danke.
Hatte auch das Problem mit der Ausrichtung der Buttons.
Ich verwende sie in einer Messagebox, die entsprechend des Inhalts unterschiedlich breit und hoch ist und mal einen, mal zwei Buttons enthält, natürlich mit variabler Beschriftung.
Der Einfachheit halber habe ich eine Tabelle mit drei Spalten verwendet (ich weiß, es ist nicht schön und geht sicher auch anders). Habe ich nur einen Button, kommt dieser in die mittlere Spalte, ansonsten rechts und links. Ich habe float:left auskommentiert und die Spaltenbreite für die Buttons jeweils auf 1px gesetzt. Die restliche(n) Spalte(n) ist/sind prozentual variabel. Lasse also die Spalten durch die Buttons weiten. Um die Buttons aber noch entsprechend platzieren zu können, benötige ich die Breite der Tabelle, die ich dadurch erhalte, daß ich die Tabelle temporär darstelle, aber gleichzeitig verstecke (diplay:block;visibilty:hidden). Dadurch kann ich über offsetWidth die Breite abfragen, obwohl die Messagebox für den Anwender noch gar nicht zu sehen ist.
Entsprechend setze ich dann den Abstand der Buttons vom rechten und linken Rand der Tabelle. Alternativ könnte ich mir auch die Breite der Buttons ausgeben lassen (um z.B. die Spaltenbreiten festzulegen) und so diese zueinander und zu anderen Objekten platzieren.
Gruß, René
René said,
Oktober 11, 2007 @ 23:29
Update: Ich habe mich geirrt. Ich hatte eine Variante, bei der ich float:left auskommentiert hatte. In meiner finalen Version ist float:left wieder dabei.
Gruß, René
Armin said,
Oktober 24, 2007 @ 20:23
Hallo,
ich (Anfänger) sitze seit Stunden daran, diese Buttons in ein Form einzubauen. Sie erscheinen zwar, aber im Gegensatz zum “normalen” input type=”submit” und name=”gesendet” wird bei den $_POST-Daten die Variable “gesendet” nicht gesetzt und ich kann nicht prüfen, ob das Formular bereits ausgefült wurde (form und Auswertung sind in einer Datei und das soll auch so bleiben).
Was mach ich falsch?
Alexander Hahn said,
Oktober 24, 2007 @ 20:46
@Armin
Hallo Armin!
Hast du nicht ausprobiert die oben besprochenen CSS-Anweisungen einfach auf ein Button Element anzuwenden?
Ich schaffs gerade leider nicht es selbst zu testen…
…aber diese beiden Links sollten dir helfen denke ich! Beachte aber das die Variante JS beinhaltet.
feinste grüße!
Armin said,
Oktober 24, 2007 @ 21:03
Hallo Alex,
hey, das ging ja fix. Habe das Problem jetzt gelöst. Ich hab schlicht einen Hidden Button einfügen müssen, dessen Label ich im $_POST abfragen kann. Jetzt klappt alles.
Danke vielmals!
Gruß
Armin
Alexander Hahn said,
Oktober 24, 2007 @ 21:08
@ Armin
hast du vielleicht Lust das Stück Code hier als Kommentar zu hinterlassen? feinste Grüße!
Edit: natürlich ist die Variante hier wohl noch die eleganteste!
Nicolas said,
November 13, 2007 @ 19:18
Ich habe im IE6 & IE7 das Problem, dass die Buttons nach dem Klicken nach links “hüpfen”. Ich habe sie in einem Tabellen footer eingebettet:
<tfoot>
<td class="ausr_bt"> </td> <td><a class="button" href="#" onclick="this.blur();beforeSubmit();"> <span>deaktivieren</span></a>
</td></tr></tfoot>
in der Klasse ausr_bt ist nur eine width angegeben. Im Firefox funktioniert alles einwandfrei. Hat jemand eine Idee, wodurch dieser Versatz nach links im IE nach dem Klicken auf den Button ausgelöst wird?
Grüße
Nicolas
Alexander Hahn said,
November 13, 2007 @ 19:34
Hallo Nicolas.
Ich kann dir nicht sagen woran es liegt, aber sicher, dass es nicht sinnvoll ist, an dieser Stelle Tabellen einzusetzen, denn Buttons sind keine tabellarischen Daten.
feinste Grüße
René said,
November 14, 2007 @ 10:29
Hallo Nicolas,
ich hatte am Anfang das gleiche Problem. Glaube, daß es daran liegt, daß die Buttons ja nicht wirklich fix sind, also nicht aus einem Hintergrundbild bestehen. Scheinbar hat der IE damit mehr Probleme als andere Browser (also mit der Sliding Doors Technik).
Wenn man sich die realen Breiten der Tabellenspalten z.B. mit der DevToolBar von Microsoft anschaut, sieht man, daß der IE gern eigene Werte verwendet, anstatt der für die Spalten vorgegebenen. Bei mir waren die Spalten, in denen ich die Buttons positioniert hatte, größer als die Buttons selbst, obwohl ich genau das nicht wollte. Dadurch hatte der IE auch Spielraum, die Buttons hin und her zu schieben.
Aber das ist nur so eine Idee, keine Ahnung, ob das stimmt.
Ich habe für mich folgende Lösung gefunden: Ich erzeuge bei mir dynamisch eine Tabelle in einem DIV, die jedes Mal in Höhe und Breite variiert. Daher muß ich, bevor sie dargestellt wird, mir die Breiten für jede Spalte und die Höhe ausrechnen.
Wenn ich alle Werte habe, setze ich für die Tabelle den Style “table-layout” auf “fixed” und erzeuge eine Reihe direkt darunter mit entsprechend vielen Spalten, wo ich die Breiten fest definiere. Da diese nur dazu dient, das Tabellen-Layout festzulegen, kann man gern wie bei mir die Reihe mit “display:none” und “visibility:hidden” ausblenden und verstecken.
Viel Erfolg!
Gruß, René
Nicolas said,
November 14, 2007 @ 12:11
Ich habe es gelöst, indem ich im Footer nur eine Zelle benutzt habe und den Button in ein div eingebettet habe, welchem ich ein margin-left zur Positionierung mit gegeben habe. Zwar nicht die schönste Lösung aber immerhin funktioniert es so.
Steven Weng said,
November 20, 2007 @ 12:23
die sehen sehr schick aus, aber haben 4 weisse eckige Flecken auf Hintergrund falls der Hintergrund andere Farbe als Weiss hat.
Alexander Hahn said,
November 20, 2007 @ 16:41
Äh, klar, sind ja auch Bilder mit Hintergrundfarbe.
Um Buttons für andere Hintergründe zu erstellen, kannst du ja selbst Grafiken anfertigen, oder einfach die vorliegenden Grafiken in einem Grafikprogramm deiner Wahl abändern. feinste Grüße.
assbach said,
Januar 1, 2008 @ 13:57
perfekt! vielen Dank für die Arbeit und Frohes Neues
ente382 said,
April 10, 2008 @ 11:51
Hallo,
find die Buttons richtig geil aber wie bekomm ich denn ne feste Größe hin,egal,was fürn Text da drin steht?
Alexander Hahn said,
April 10, 2008 @ 12:02
@ente382:
Sorry, ich dachte es kommt bei dem Tutorial rüber, das es genau darum geht flexible Buttons zu erstellen (-;
Eine feste Variante ist mit explizit dieser Technik nicht vorgesehen. feinste Grüße!
Armin said,
April 10, 2008 @ 12:10
Hallo,
hatte Ende letzten Jahres schon mal geschrieben - hab diese Technik auf meiner Homepage eingesetzt - siehe Webseite-Link. Hab allerdings die Farbe angepasst. Ansonsten: Großes Kino.
Lieben Gruß
Armin
Preismuli said,
Juni 28, 2008 @ 12:08
Hallo,
ich in meinem Preisvergleich auch CSS Button im Header. Leider habe ich dort das Problem das der Starseite Button im IE immer kleiner angezeigt wird so als ob er Grundsätzlich immer der aktive Button ist. Ich weis das hat mit diesem Thread recht wenig zu tun aber vielleicht kann mir hier jemand helfen. Ich bin schon Tagen am googeln und habe auch schon verschiedene Anfragen gestellt aber keiner weis bisher woran das liegt.
Preismuli said,
Juni 28, 2008 @ 13:42
Habe das Problem nun Dank dieses Threads gelöst. Ich Depp hatte bei Type anstelle von Button Submit angegeben. Daran hatte es gelegen.
aefxx said,
September 11, 2008 @ 01:44
Vielen Dank an den Autor.
Zusammen mit dem güldenen Script auf http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html
können ausgerissene Haare nun endlich wieder wachsen.
mfG
aefxx
Ulli said,
Dezember 4, 2008 @ 14:26
Die Buttons sind cool!!! - wie kann man diese verwenden, wenn man im html-code einen Submit-Button verwenden möchte?? (mit input type=”submit” value= “Submit” class=”button”) - wo und wie bringt man da das notwendige a-Tag und span-Tag unter?
mfg
Ulli
Ulli said,
Dezember 4, 2008 @ 20:10
@Ulli: hat sich erledigt - mit javascript läßt es sich lösen; würde es sich mit purem html + css auch lösen lassen?
inputs said,
Mai 7, 2009 @ 09:49
Hallo
ich bekomme kein Absenden des Formulars hin
Mein Versuch:
<a class="button" href="javascript: document.Formname.submit();" onclick="this.blur();"><span>verschicken</span></a>
Aber leider gehts nicht. Andere Schreibweisen hab ich ausprobiert. Ich nehme an, es liegt an <form>, denn da ist "action" leer, weil der php-Code in derselben Datei steht, sieht so aus:
<form method="post" name="Formname" id="Formname" action="">
Oder hats vielleicht doch einen anderen Grund. Weiss jemand einen Rat? Muss doch gehen!
Viele Grüße, Inputs
F R A T S C H said,
Mai 7, 2009 @ 11:04
Hi alle zusammen -
in “Opera” wechselt die Ansicht nicht bei mittlerem Klick, nur wenn man rechts aufg den Button drückt - hat jemand eine Lösung?
Jens said,
Mai 7, 2009 @ 14:58
Wenn hier von Buttons geredet wird, dann erwarte ich auch das Button Element. Diese Lösung ist zwar schön, hilft mir aber nicht weiter, da ich ein Button- oder Submit-Element in einem Formular brauche. Hier wird ja mit normalen Links gearbeitet und mit JS die Funktionalität programmiert.
Ich habe dies zwar auch mit dem Button-Element, anstatt mit dem A-Element hinbekommen, aber der IE macht einen hässlichen “Eindrück-Effekt”. Weiß einer von euch, wie man den deaktivieren kann?
Gruß Jens
sexy button zentrieren - CSS @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe said,
August 18, 2009 @ 10:57
[…] sexy button zentrieren Hi, kann mir jemand sagen, wie man diese "sexy buttons" (http://keasone.de/development/2007-0…erstellen-sexy) zentrieren kann? Ich bekomms irgendwie nicht hin mit text-align:center, <center> oder was auch immer. Raff das nicht ganz http://xxx.pytalhost.com/button.html […]
keasone.de | finest screen graphics ~ Headline Elemente mit CSS stylen said,
Oktober 4, 2009 @ 10:34
[…] Ich habe unzählige Anregungen zu meinem Beitrag über die Formatierung einfacher CSS Buttons mit der sliding doors Technik bekommen, daraufhin begann ich über ansprechende Formatierungen von Überschriften nachzudenken, welche auf einfache Weise auch auf andere Elemente angewendet werden können. […]