Frage 2 Button (a vs. input) gleich formatieren

[annsen]

ich habe auf der Startseite einen Button

<a class="button" href="kontakt.html">kontakt</a>

der auf die Kontaktseite verlinkt und im Kontaktformular dann einen Senden-Button

<input id="senden" class="button" type="submit" value="SENDEN">

Nun wollte ich beide gleich aussehen lassen:

.button {
    padding: 0.5em 2em;
    border: 1px;
    border-style: solid;
    border-color: rgba(204,204,204,1);
    border-radius: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color:rgba(217,225,249,1);
    color: rgba(0,0,0,1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    }

.button:hover,
.button:active {
    background-color: rgba(54,100,139,1);
    color: rgba(255,255,255,1);
    }

Das funktioniert so aber nicht. Kann mir jemand erklären warum nicht?

Vielen Dank vorab!!

 

[MrMurphy]

Hallo

Das sind nicht zwei Buttons, sondern ein Link und ein Button. Links und Buttons haben unterschiedliche Aufgaben. Links und Buttons werden deshalb von Browsern unterschiedlich dargestellt.

Das siehst du wenn du beide ohne jedes CSS anschaust.

Sie müssen deshalb individuell mit CSS gestaltet werden. Wobei die Buttongestaltung durch die Browser viel strikter (wie bei vielen Formularelementen) vorgegeben ist und die deshalb nur eingeschränkt angepasst werden können.

Gruss

MrMurphy

 

[Aaron3219]

Kurze Info: wenn du buttons per CSS oder so verönderst, werden sie bei manchen Betriebssystem oder Browsern nicht so angezeigt wie du ihn gerne haben würdest. IOS z.B benutzt seinen eigenen Button, welcher auch nicht umgestylt wird, auch wenn er bei Windows anders aussieht

Beispielseite (sofern du ein Apple Gerät besitzt)
www.frachtagentur-krüger.de/email

 

[annsen]

Das sind nicht zwei Buttons, sondern ein Link und ein Button. Links und Buttons haben unterschiedliche Aufgaben. Links und Buttons werden deshalb von Browsern unterschiedlich dargestellt.

Ja, sorry, hab mich da etwas verquer ausgedrückt. Für den Besucher sollten es dann 2 (optisch) nicht zu unterscheidende Buttons sein. Der Unterschied im HTML ist mir schon bekannt und ich habe auch gelesen, dass die Gestaltung per CSS bei den Buttons nicht so einfach ist. Allerdings hab ich bisher noch keine Übersicht gefunden, wo das im Einzelnen erklärt wurde...

Also beidem eine Klasse geben und darauf hoffen, dass sich jedes Element seine Punkte rausnimmt - das geht dann wohl nicht. Wäre auch zu einfach...

Kurze Info: wenn du buttons per CSS oder so verönderst, werden sie bei manchen Betriebssystem oder Browsern nicht so angezeigt wie du ihn gerne haben würdest. IOS z.B benutzt seinen eigenen Button, welcher auch nicht umgestylt wird, auch wenn er bei Windows anders aussieht

Beispielseite (sofern du ein Apple Gerät besitzt)
www.frachtagentur-krüger.de/email

...danke für den Hinweis!

Auf der Seite http://www.carinaczisch.de/kontakt.php habe ich etwas für mich komplett Neues gefunden. hier wurde ein "button"-Tag benutzt - das kannte ich noch nicht. Hab mich dazu aber noch nicht umfassend belesen. Das scheint aber an Stelle von <input type="submit"> genutzt werden zu können, dabei aber besser zu gestalten zu sein... dann passts bestimmt auch mit den Browsern der Foxconn-Suicid-Gang!

Ich versuchs mal damit - erstmal Danke für eure Tipps!!!