CSS Button Hilfe!!!!!

  • Autor
  • Nachricht

Chriss.ko

Offline

Benutzeravatar


  • Wohnort: Mainhattan
1  Mo Jan 30, 2012 19:07
Hi *,

jaja, ich weiß, HTML und CSS Programmiert man nicht aber in wohin sonst? :?

Jetzt zum Problem: Ich habe mich ja jetzt doch für CSS Buttons entschieden, zumindest da wo ich es hin bekomme. Leider ist das Shop System doch etwas schwieriger als gedacht. Sei es wie es ist, jetzt brauche ich eure Hilfe. Ich habe zwei CSS Buttons die für zwei unterschiedliche Buttons sind, ein Button für einen normalen Link und einen für ein "Form submit". So sieht das dann im Html aus:

Submit:
Code: Alles auswählen
<div class="css_submit_wrap" title="Anmelden"><input type="submit" name="Anmelden" value="Anmelden" class="css_submit_button" /></div>


Normal:
Code: Alles auswählen
<div class="css_button_wrap" title="Weiter"><a class="css_buttons" href="/create_account.php"><span>Weiter</span></a></div>


Hier der CSS Code:

Submit:
Code: Alles auswählen
.css_submit_wrap{
}
.css_submit_button {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79941f), color-stop(1, #616e19) );
        background:-moz-linear-gradient( center top, #79941f 5%, #616e19 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79941f', endColorstr='#616e19');
        background-color:#616e19;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:13px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #290729;
        }
.css_submit_button:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79941f), color-stop(1, #616e19) );
        background:-moz-linear-gradient( center top, #79941f 5%, #616e19 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79941f', endColorstr='#616e19');
        background-color:#79941f;
        }
.css_submit_button:active {
        position:relative;
        top:1px;
        }


Normal:
Code: Alles auswählen
.css_button_wrap {
}
a.css_buttons {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79941f), color-stop(1, #616e19) );
        background:-moz-linear-gradient( center top, #79941f 5%, #616e19 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79941f', endColorstr='#616e19');
        background-color:#79941f;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:13px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #290729;
}
a.css_buttons:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #616e19), color-stop(1, #79941f) );
        background:-moz-linear-gradient( center top, #616e19 5%, #79941f 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#616e19', endColorstr='#79941f');
        background-color:#79941f;
}
a.css_buttons:active {
        position:relative;
        top:1px;
}


Jetzt zum verhalten: Wenn ich mit der Maus über die normalen Knöpfe gehen färben sie sich um und die Maus ändert sich vom Zeiger zu einer Hand. Wenn ich das bei den "Submit" Button mache ändern sich weder die Farben noch der Mauszeiger.

Warum? Was wird bei dem Submit Button anders gemacht?

Eine Sache habe ich raus gefunden, wenn ich diese Zeile raus nehme:
Code: Alles auswählen
background:-moz-linear-gradient( center top, #79941f 5%, #616e19 100% );

Dann ändert sich die Farbe von dem Button wenn ich drüber fahre aber er sieht dann natürlich Mist aus.

Hat jemand eine Idee was da falsch läuft?

Wenn jemand das ganze in "Action" sehen will schicke ich auch gerne die URL zu dem Shop....

Danke,

Chriss
Zuletzt geändert von Chriss.ko am Di Jan 31, 2012 18:38, insgesamt 1-mal geändert.
Träger des 4Gb USB-Sticks am Bande.

--
Religionskriege sind Konflikte zwischen erwachsenen Menschen, bei denen es darum geht, wer den cooleren, imaginaeren Freund hat.

Wenn alle Koalas sterben kommt es zur Eukalypse!

Patrick

Offline

Benutzeravatar



  • Wohnort: 76307
2  Di Jan 31, 2012 17:49
Das mit dem Cursor kannst Du so machen:
Code: Alles auswählen
css_submit_button {
...
cursor: pointer;
}

Patrick

Offline

Benutzeravatar



  • Wohnort: 76307
3  Di Jan 31, 2012 18:00
So funktionierts:
Code: Alles auswählen
a.css_buttons,
.css_submit_button {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79941f), color-stop(1, #616e19) );
        background:-moz-linear-gradient( center top, #79941f 5%, #616e19 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79941f', endColorstr='#616e19');
        background-color:#616e19;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#ffffff;
        font-family: Arial, sans-serif;
        font-size:13px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #290729;
        cursor: pointer;
        }
a.css_buttons:hover,
.css_submit_button:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #616e19), color-stop(1, #79941f) );
        background:-moz-linear-gradient( center top, #616e19 5%, #79941f 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#616e19', endColorstr='#79941f');
        background-color:#79941f;
        }
a.css_buttons:active,
.css_submit_button:active {
        position:relative;
        top:1px;
        }

Chriss.ko

Offline

Benutzeravatar


  • Wohnort: Mainhattan
4  Di Jan 31, 2012 18:38
Hi Patrick...

Danke!!! Genau so ist es geht es jetzt! ;) Kannst du mir noch verraten warum ich bei dem "Submit" Button noch den "Cursor" setzen muss? Mir ist einfach nicht klar, warum ich die Option bei dem einen Button setzen muss, und bei dem anderen nicht. :?

Gruß,

Chriss
Träger des 4Gb USB-Sticks am Bande.

--
Religionskriege sind Konflikte zwischen erwachsenen Menschen, bei denen es darum geht, wer den cooleren, imaginaeren Freund hat.

Wenn alle Koalas sterben kommt es zur Eukalypse!

Patrick

Offline

Benutzeravatar



  • Wohnort: 76307
5  Di Jan 31, 2012 20:24
Es sind eben zwei Unterschiedliche Elemente. Das eine verlinkt nur auf ein Ziel, während das andere ein Formular absendet.

Hier hast Du ne Übersicht: http://www.css4you.de/cursor.html

Grüße
Patrick

Atarimaster

Offline

Benutzeravatar


  • Wohnort: Ruhrgebiet
6  Mi Feb 01, 2012 10:01
Chriss.ko hat geschrieben:Kannst du mir noch verraten warum ich bei dem "Submit" Button noch den "Cursor" setzen muss? Mir ist einfach nicht klar, warum ich die Option bei dem einen Button setzen muss, und bei dem anderen nicht.


Bei Buttons ändert sich im Web der Mauszeiger doch nie – siehe z.B. die »Absenden«-Buttons hier im Forum; oder bei einem »nackten« HTML-Formular ganz ohne CSS. Deshalb muss diese Option explizit gesetzt werden.

Und das andere ist ja nun mal kein Button, sondern ein Link, der »zufällig« wie ein Button aussieht. Anders gesagt: Es ist nicht so, dass Du die Option bei dem einem Button setzen musst und bei dem anderen nicht – vielmehr ist es so, dass Du die Option bei einem Button setzen musst und bei einem Link nicht.
:)
The truth is always either terrible or boring. (Sansa Stark)

Chriss.ko

Offline

Benutzeravatar


  • Wohnort: Mainhattan
7  Mi Feb 01, 2012 18:26
Ahhhh... mein Dank geht natürlich an euch beide. Eine Kombination aus beiden Postings hat mich erleuchtet. ;)


Gruß,

Chriss
Träger des 4Gb USB-Sticks am Bande.

--
Religionskriege sind Konflikte zwischen erwachsenen Menschen, bei denen es darum geht, wer den cooleren, imaginaeren Freund hat.

Wenn alle Koalas sterben kommt es zur Eukalypse!

Zurück zu Programmierecke

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder