powerpan
Goto Top

Formular Button mit CSS

Hi

ich habe auf einer meiner Seiten jetzt als Navigation Buttons eingesetzt, die ich mit CSS formatiere

das sieht wie folgt aus:
eb085046f9f64bc72d08c34db5e03a7e-bild1

der Quellcode dazu ist:

 <div class="clear"><a class="button" href="startseite.php" onclick="this.blur(); return true;"><span>Home</span></a></div>  

der CSS code dafür sieht so aus:

.clear { 
   overflow: hidden;
   width: 100%;
}

a.button {
   background: transparent url(bg_button_a.gif) no-repeat top right;
   font: normal 12px arial, sans-serif;
   color: #666!important;
   display: block;
   float: left;
   height: 24px;
   margin-right: 6px;
   padding-right: 18px; 
   text-decoration: none;
   border-style: none
}

a.button span {
   background: transparent url(bg_button_div.gif) no-repeat;
   display: block;
   line-height: 14px;
   padding: 5px 0 5px 18px;
}

a.button:active {
   background-position: bottom right;
   color: #000;
   outline: none; /* die gepunktete Linie im FF abschalten */
}

a.button:active span {
   background-position: bottom left;
   color: #000!important;
   padding: 6px 0 4px 18px; /* Text 1px nach unten verschieben */
}

a.button:hover {
   text-decoration: none;
   color: #000!important;
}

Wie kann ich meine Formularbuttons geanuso aussehen lassen?

Content-ID: 81687

Url: https://administrator.de/forum/formular-button-mit-css-81687.html

Ausgedruckt am: 26.12.2024 um 04:12 Uhr

LordGurke
LordGurke 26.02.2008 um 15:03:17 Uhr
Goto Top
Du könntest eine CSS-Klasse (meinetwegen #formbutton) erstellen und dort das selbe definieren, was du schon für a.xxxxx definiert hast.
Den Formularbutton bindest du dann mit
<input type="submit" class="formbutton" ......> ein.
PowerPan
PowerPan 26.02.2008 um 15:53:19 Uhr
Goto Top
ja ok und wie sieht das aus mit den zusätzlcieh klassen?

weil wenn ich draufklicke, dann verändert scih der button wenn du dir die Klassen mal anschaust