<button> verwenden?

[Jnnbo]

Moin,

ich bin durch diesen Artikel http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/ auf das HTML Element <button> aufmerksam geworden.

Ich möchte diese zwei Schaltflächen

damit umsetzten. Bin ich da auf dem richtigen Weg, oder doch lieber ein <span> oder <div> nehmen? Würde beide Buttons als Grafik ausschneiden und als Background einbinden.

[Gunnar Bittersmann]

@@Jnnbo:

nuqneH

… auf das HTML Element <button> aufmerksam geworden.

Ich möchte diese zwei Schaltflächen … damit umsetzten. Bin ich da auf dem richtigen Weg, oder doch lieber ein <span> oder <div> nehmen?

Zum Abschicken von Formularen oder als Auslöser für JavaScript ist alles andere als <button> falsch. Für Links ist alles andere als <a href=…> falsch.

Würde beide Buttons als Grafik ausschneiden und als Background einbinden.

Würde ich nicht. Den Text würde ich als Text auf den Button setzen. Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein. Bleiben nur noch die Icons als Grafiken; und zwar SVG.

Qapla'

[Mitleser]

Ich möchte diese zwei Schaltflächen

damit umsetzten.

Würde beide Buttons als Grafik ausschneiden und als Background einbinden.

Würde ich nicht. Den Text würde ich als Text auf den Button setzen. Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein. Bleiben nur noch die Icons als Grafiken; und zwar SVG.

Bleibt noch der obere Lichtkegel?

[Jnnbo]

Bleibt noch der obere Lichtkegel?

Was meinst du mit Lichtkegel?

[Mitleser]

Bleibt noch der obere Lichtkegel?

Was meinst du mit Lichtkegel?

[Jnnbo]

So genau nehme ich das nicht, hab da einfach bisschen mit Gimp herumgespielt :)

[Tabellenkalk]

Hallo,

hab da einfach bisschen mit Gimp herumgespielt :)

hab da einfach bisschen mit jsfiddle herumgespielt. Ein Anfang...

Gruß
Kalk

[Gunnar Bittersmann]

@@Mitleser:

nuqneH

Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.

Bleibt noch der obere Lichtkegel?

Ich sagte: Es werde Licht. Und es ward Licht.

Wo Licht ist, ist auch Schatten.

Qapla'

PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!

[Tabellenkalk]

Hallo,

Ich sagte: Es werde Licht. Und es ward Licht.

Das war jemand anderes!

Gruß
Kalk

[Der Martin]

Mahlzeit,

Ich sagte: Es werde Licht. Und es ward Licht.
Das war jemand anderes!

das schon, aber großartige Leistungen inspirieren auch immer irgendwelche Nachahmer.

Ciao,
 Martin

[Mitleser]

Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.

Bleibt noch der obere Lichtkegel?

Ich sagte: Es werde Licht. Und es ward Licht.

Wo Licht ist, ist auch Schatten.

PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!

Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.

[Jnnbo]

Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.

Wie hier schon geschrieben kommt es mir nicht auf jedes Detail an, aber auch mich würde es interessieren, wie man so ein Button komplett mit CSS inkl. dem Lichteffekt so umgesetzt bekommt.

[1UnitedPower]

Hakuna matata!

Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.

http://jsfiddle.net/sysrcakf/1/

Die Fraben hab einfach mal nach Augenmaß justiert.

[Mitleser]

http://jsfiddle.net/sysrcakf/1/

Fein! Ich sollte mal meine CSS-Kenntnisse auffrischen :-)

[Jnnbo]

Hallo,

http://jsfiddle.net/sysrcakf/1/

wow, das sieht richtig toll aus. Hab mal noch ein Icon eingefügt http://jsfiddle.net/sysrcakf/2/ jetzt stoße ich aber an ein weiteres Problem, wie kann ich dem Icon sagen, er soll bisschen Abstand zum Text haben und der Text bzw. das Icon soll Mittig vom Text (oben nach unten) sein. Vielleicht könntest du mir hier nochmals helfen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Jnnbo!

Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.

Sowie background-position

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.

Schlage dir line-height aus dem Kopf.

Qapla'

[Jnnbox]

Moin Matthias,

Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.

ok, hat geklappt http://jsfiddle.net/sysrcakf/3/

  
button::before {  
    content: url(http://fs1.directupload.net/images/150221/4wlu6kbs.png);  
	vertical-align: sub;  
	margin-right: 7px;  
}  

[Gunnar Bittersmann]

@@Mitleser:

nuqneH

Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.

Bleibt noch der obere Lichtkegel?

Ich sagte: Es werde Licht. Und es ward Licht.

Wo Licht ist, ist auch Schatten.

PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!

Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.

Am Anfang war das Wort „inset“.

Hat 1UP ja schon eindrucksvoll demonstriert. Warum aber mit jsfiddle, was dazu nicht sonderlich taugt?

Qapla'

[Jörg Reinholz]

Bleibt noch der obere Lichtkegel?

2 Schatten nacheinander im CSS aufführen.

Jörg Reinholz

[Jnnbo]

Hallo,

Zum Abschicken von Formularen oder als Auslöser für JavaScript ist alles andere als <button> falsch. Für Links ist alles andere als <a href=…> falsch.

ist mein HTML und CSS richtig? http://jsfiddle.net/sysrcakf/5/

  
.registrieren {  
	font-size: 0.9em;  
	text-decoration: none;  
	color:hsl(20,50%,40%);  
    padding:0.5em 0.5em 0.5em 0.8em;  
    background-color:white;  
    background-image: linear-gradient(hsl(0,0%,95%), hsl(0,0%,90%));  
    border-radius:0.5em;  
    border: 1px solid hsl(0,0%,88%);  
    text-shadow: white 1px 1px;  
	width: 7em;  
	display: block;  
}  
  
.registrieren::before {  
    content: url(http://fs1.directupload.net/images/150221/4wlu6kbs.png);  
	vertical-align: sub;  
	margin-right: 8px;  
}  

  
<a href="#" class="registrieren">Registrieren</a> <br><br><br>  

[Tabellenkalk]

Hallo,

ist mein HTML und CSS richtig?

Das können dir entsprechende Validatoren viel schneller und genauer beantworten.

Von mir zwei Anmerkungen: du missbrauchst offensichtlich <br> für Abstand. Dafür nimmt man besser CSS. Dem Button verpasst du eine feste Breite, das führt bei mir dazu, dass das Icon über dem Text steht. Ist das gewollt?

Gruß
Kalk

[Jnnbo]

Hallo,

Von mir zwei Anmerkungen: du missbrauchst offensichtlich <br> für Abstand. Dafür nimmt man besser CSS. Dem Button verpasst du eine feste Breite, das führt bei mir dazu, dass das Icon über dem Text steht. Ist das gewollt?

die <br> sind doch nur in diesem Beispiel drin, dass ich beide Buttons untereinander habe. Auf meiner Seite, gibt es später ein Button, da kommen die <br> natürlich wieder raus.

Kann ich nicht bestätigen, dass das Icon über dem Text steht. Und ja der Button hat eine feste Breite, denn in meinem Design hat der Button einen festen Platz, da kann ich nicht sagen, nimm dir den Platz, den du brauchst.

[Tabellenkalk]

Hallo,

Kann ich nicht bestätigen, dass das Icon über dem Text steht.

Achso, wenn es bei dir passt, isses ok. Ich hatte nur gedacht, du suchst feedback.

Gruß
Kalk

[Jnnbo]

Hallo,

Achso, wenn es bei dir passt, isses ok. Ich hatte nur gedacht, du suchst feedback.

Feedback ist natürlich erwünscht nur mich wundert es eben gerade bisschen warum bei dir das Icon über dem Text steht, was natürlich _nicht_ sein sollte. Mit welchem Browser schaust du?