Buttons Effekte ??

[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