Logo - MyWebsolution.de
User gesamt  :  2310965
User online  :  5
KubaSeoTräume, PHP Forum, PHP Community and more ... MyWebsolution.de!
   
   
 
Registrieren Login User F.A.Q Suche Home

eingeloggt bleiben

MyWebsolution.de Foren » HTML und CSS » [TUT] Buttons Hintergründe geben

Seite: 1 Posts pro Seite: 5 10 20
Autor Thread
19.04.2008 23:28 Uhr [TUT] Buttons Hintergründe geben
gelöschter User
 
registriert
wohnt in
Beiträge 0
Haay,

Also CSS kann ich ein bisschen möchte deswegen euch zeigen wie ihr bei Buttons schöne hintergründe machen könnt. also.

Um bei einen Button ein Hintergrundbild zu bekomemn benutze Folgenden Code:

Code:
<input type="submit" style="background-image: url(images/upload.gif); color: #FFFFFF; border:1px solid gray;" name="submit" value="Buttontext">


Zur Erklährung:

Code:
style="background-image: url(images/upload.gif);


background-image Damit kommt der Hintergrund aber es fehlt noch dieser Code: . url(images/upload.gif) dies ist die Bilddatei (Hintergrundbild) du musst IMMER url(http://deineadresse.de/images/back.gif); .

Color: Die Textfarbe z.B Weiß = #FFFFFF oder Rot = #FF0000 oder Schwarz = #000000

Border: Der Rahmen dieses ist dan um den Button . Also dies ist eine art Button Rahme :D

---- 1px = Die Breite des Border 1px,2px,3px...
---- solid = Also wie der Rahmen aussehen soll solid ganz normal also eine normaler Rahmen.

---- gray = Border Farbe kann auch durch einen Hex-Code ersetzt werden z.B #FF0000 für Rot

Code:
value="Buttontext"


Wo Buttontext steht da kannst du deinen Text oder Wort reinschreiben den man später auf dem Button sieht.


So das wars mit meinen Tutorial ich werde bald ein neues machen mit CSS und HTML xD Achso die Grafiken für die Hintergründe müsst ihr natürlich selber machen xD

mfg,

youfree

P.S:

Benutze diesen Code wen du eine Farbe als hintergrund möchtest:

Code:
<input type="submit" style="background-color: #Hex-Code; color: #FFFFFF; border:1px solid gray;" name="submit" value="Buttontext">


bei #Hex-Code z.B #FF0000 für Rot usw.
Profil ansehen
03.05.2010 20:26 Uhr
Basi
User
 
registriert 03.05.2010
wohnt in Deutschland
Beiträge 6
Das ist ziemlich umständlich, das geht wesentlich einfacher.

Warum nicht einfach so:
Code:
  <input type="image" src="pfad/zum_bild.jpg" value="Absenden" />


Über Klassen kann man dann auch einen Rahmen einstellen, ist aber Blödsinn, wenn man für einen Button eine Hintergrundgrafik macht, dann sollte man dieser Grafik sämtliche gewünschte Features hinzufügen, sprich den Rahmen auf die Grafik packen.

Der inputtype image funktioniert genau so wie submit.

Tipp:
Warum hast du keine Klassen genutzt? Es geht beim Webdesign um die Trennung von Inhalt und Aufbau.

Ansonsten gutes Tutorial ;)
Profil ansehen
Seite: 1 no reply
Powered by Pascal Landau © 2006 MyWebsolution.de
Designed by Pascal Landau © 2006 MyWebsolution.de
 
 
 
 
Home Email Impressum Disclaimer Statistik