Buttons Effekte ??

[hyhley]

Hallo liebe Leuts,

bitte, kann mir einer helfen? Ich gucke nun schon seit etlichen Stunden und finde nicht den passenden java-script code....??? Für Buttons, die ich selbst mit PI 12 erstellt habe, in meiner Lehr HP eingfügt habe...und ich hätte gerne an diesem Button...der "Bitte eintreten".....einen Effekt, so das sich dieser Button entweder optisch eindrücken läßt..oder was es sonst noch für Effekt gibt.
Kann mir einer einen Tip geben, wo ich solche Anwendungen dafür finde?

Also, habe mich wohl ein wenig umständlich ausgedrückt, gibt es einen Code dafür, das sich selbstgemachte Buttons optisch eindrücken lassen???

Entweder html oder css oder im javascript??

Bin noch ziemliche Anfängerin in allen Bereichen. Mit PI 12 bin ich schon bis Lektion 40 gekommen und im PSP X habe ich mir testhalber mal auch als Testversion geladen, weil finde ich auch ziemlich spannend. Und in HTML habe ich einen Einsteigerkurs erfolgreich abgeschlossen.

Über eine hilfreiche Antwort würde ich mich sehr freuen

viele Grüße
Marion

[Kylee]

Button effekte per css ...

ohne hintergrund grafik :

Code:

<style type="text/css">

/* Imenu [blau]: 2003 by Ingo Turski (www.1ngo.de) */
/* inspiriert durch Eric Meyer und Claire Campbell */
/* ----------------------------------------------- */

body {
  font-size:100.1%; color:white; background:#39c;
}

ul.imenue {
  color:white; background:#17a;
  border-bottom:0.2em solid #17a; border-right:0.2em solid #17a;
  padding:0 1px; margin-left:0;
  width:12em; font:normal 0.8em Verdana, sans-serif;
}

.imenue li {
  list-style:none; margin:0; font-size:1em;
}

.imenue li a, .imenue li span {
  display:block;
  text-decoration:none;
  margin-bottom:0.5em; margin-top:0.5em;
  color:white; background:#39c;
  border-width:1px; border-style:solid; border-color:#5bd #035 #068 #6cf;
  border-left:1em solid #fc0;
  padding:0.25em 0.5em 0.4em 0.75em;
}

.imenue li span {
  color:white; background:#17a;
  border-color:#069 #6cf #5bd #f30;
  padding:0.4em 0.35em 0.25em 0.9em;
}

.imenue li a.aktuell {
  border-color:#5bd #035 #068 #f30;
}

.imenue li a, .imenue li span {
  width:99%;
/* Weitenangabe für den Internet Explorer zur Ausdehnung des Linkbereiches */
}

html>body .imenue li a, html>body .imenue li span {
  width:auto;
/* die (falsche) Weitenangabe für standardkonforme Browser zurücknehmen */
}

.imenue li a:hover, .imenue li a.aktuell:hover {
  background:#28b;
  border-color:#069 #6cf #5bd #fc0;
  padding:0.4em 0.35em 0.25em 0.9em;
}

.imenue li a:active, .imenue li a.aktuell:active {
  background:#17a;
  border-color:#069 #6cf #5bd white;
  padding:0.4em 0.35em 0.25em 0.9em;
}
</style>

und dann im normalen html/php dokument :

Code:

<ul class="imenue">
  <li><strong><a href="http://www.1ngo.de/web/">Ingo Turski</a></strong></li>
  <li><a href="#">normaler Link</a></li>
  <li><span>akt. Menüpunkt</span></li>
  <li><a href="#">Linktext mit Zeilenumbruch</a></li>
  <li><a class="aktuell" href="#">aktueller Link</a></li>
  <li><a href="#">normaler Link</a></li>
</ul>

so zu finden bei : http://www.1ngo.de/web/imenu.html

mit graphischen buttons:

/* noch nicht besuchte Seiten*/

Code:

a:link  {
    color: #F24F00; // Link farbe
    font-weight: bold; // textstärke
    font-size: 12px; //textgröße
    border-style: outset; //umrandung
    width: 140px; //größe des buttons breite
    height: 40px; // größe des buttons höhe
    border-color: Yellow; //umrandungsfarbe
    font-family: "Comic Sans MS"; //schrifttyp
    background-image: url(Bilder/aktive.jpg); //button image
}

/* bereits besuchte Seiten*/

a:visited  {
    color: #A52A2A;
    font-weight: bold;
    font-size: 12px;
    border-style: outset;
    width: 140px;
    height: 40px;
    border-color: Yellow;
    font-family: "Comic Sans MS";
    background-image: url(Bilder/visited.jpg);
}

/* gerade angeklickt*/

a:active  {
    color: Red;
    font-weight: bold;
    font-size: 12px;
    text-align: right;
    text-transform: uppercase;
    border-style: inset;
    width: 140px;
    height: 40px;
    border-color: #FFD700;
    font-family: "Comic Sans MS";
    background-image: url(Bilder/aktive.jpg);
}
*/bei mouseover*/

a:hover  {
    color: #FFA500;
    font-weight: bold;
    font-size: 12px;
    border-style: outset;
    width: 140px;
    height: 40px;
    border-color: Yellow;
    font-family: "Comic Sans MS";
    background-image: url(Bilder/hover.jpg);
    
}

LG Kylee

[hyhley]

Halli Hallo,

vielen heißen Dank für diese informativen Ratschläge und den Link.

Wünsche dir noch schönen Sonntag und liebe Grüße Marion

Hat mir sehr geholfen!!!