abgerundeter button in css?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • abgerundeter button in css?

    wie kann ich einen abgerundeten button erstellen?

    also wie im bild zu sehen is, wird der farbverlauf durch ein eckiges bild dargestellt. jeztt fehlt mir nur noch (für mein menu) die mousoverfunktion mit den abgerundeten ecken bzw. das erscheinen des buttons!

    weiß jemand wie so etwas erzeugt wird?

    wäre für hilfe dankbar (befasse mich das 1. mal mit css)!
    Angehängte Dateien

  • #2
    Vorausgesetzt, du meinst mit Button "<input type="submit" ..", dann würde ich dir empfehlen ".. style="background-image:url("Path/to/img.png");">" zu benutzen. Und natürlich den Rand auf 0 setzen...

    mfg nOe
    "I am what I am and I do what I can..."
    Meine HP -- Mein GPG-Key
    Meine Projekte: WebStorage 2.0 -- easyAJAX-Chat 2.2.0 (beta)

    Kommentar


    • #3
      naja oder wie kann ich im allgemeinen so eine art button erzeugen (ohne das ich jetzt photoshop bemühen muß)!

      da muß es doch ne css function geben, oder?

      und wenn ich den link (button) anklicke, bleibt darauf dann die makierung (wie auf dem bild)!

      also ohne das ich mit der maus drüber gehe, sollt es so ausschauen und wenn ich mit der maus drüber gehe, so wie im 1. beitrag!
      Angehängte Dateien
      Zuletzt geändert von Gamer20; 14.01.2007, 00:06.

      Kommentar


      • #4
        Direkt einen Button kannst du nicht mit CSS erstellen, du müsstest ihn formatieren, und auch das ginge nur bedingt, z.b. Rand, Hintergrundfarbe, Schriftart/-farbe..

        Und ehrlich gesagt verstehe ich nicht was du meinst mit der Markierung, denn in dem .png - Bild sehe ich keine..

        Gruß, nOe
        "I am what I am and I do what I can..."
        Meine HP -- Mein GPG-Key
        Meine Projekte: WebStorage 2.0 -- easyAJAX-Chat 2.2.0 (beta)

        Kommentar


        • #5
          so ok ich habs jetzt mit reinem html und bildern gemacht!

          jetzt soll nur, wenn ich ein button (bild) anklicke, der farbverlauf net grau sein, sondern (später) blau und es soll dann "gedrückt" bleiben!

          heißt nach dem anklicken bleibt der farbverlauf auf blau und verschindet net wieder (so wie jetzt durch mouseover und mouseout -> von grau wieder auf weiß)!
          Zuletzt geändert von Gamer20; 14.01.2007, 14:09.

          Kommentar


          • #6
            Dann musst du noch einen zweiten Button (Bild) mit Photoshop erstellen, in dem der Verlauf blau ist. Und dann schreibst du in die CSS-Datei:

            a.menu:active {
            background-image:url("Path/to/img.png");
            }

            Zusätzlich musst du noch in deinem "<a href="#" .." Tag " .. class="menu">" hinzufügen, da du ansonsten nicht auf a.menu zugreifen könntest...

            Versuch macht klug!
            "I am what I am and I do what I can..."
            Meine HP -- Mein GPG-Key
            Meine Projekte: WebStorage 2.0 -- easyAJAX-Chat 2.2.0 (beta)

            Kommentar


            • #7
              gibts für mein vorhaben dazu ein tutorial? da ich es mir sonst sehr schlecht vorstellen kann, wie ich es einbauen soll.

              im moment hab ich ja folgenden code für den 1. button (ohne CSS Code, also allesn ur html):

              <tr>
              <td width="100" align="center">
              <a href="#" onMouseOver="image.src='Bilder/A-Button.gif';" onMouseOut="image.src='Bilder/A-Button2.gif';">
              <img name="image" src="Bilder/A-Button2.gif" border=0></a></td>
              ....

              Kommentar


              • #8
                Original geschrieben von Gamer20
                gibts für mein vorhaben dazu ein tutorial? da ich es mir sonst sehr schlecht vorstellen kann, wie ich es einbauen soll.

                im moment hab ich ja folgenden code für den 1. button (ohne CSS Code, also allesn ur html):

                <tr>
                <td width="100" align="center">
                <a href="#" onMouseOver="image.src='Bilder/A-Button.gif';" onMouseOut="image.src='Bilder/A-Button2.gif';">
                <img name="image" src="Bilder/A-Button2.gif" border=0></a></td>
                ....
                PHP-Code:
                a
                a
                :hover <--- OnMouseOver
                a
                :visited
                a
                :visited:hover 
                css4you

                ich denke das was du suchst sind erstmal die CSS eigenschaften oder besser Pseudoelemente Hover Visited usw.

                zusätzlich ^^
                PHP-Code:
                background-image:url(); 
                du kannst das im grunde so lösen wie du willst.
                verschachteln vererben usw. lies dir am besten erstmal die oben genannte url durch. vieleicht verstehst du dann besser.

                mfg Wyveres
                Bitte Beachten.
                Foren-Regeln
                Danke

                Kommentar

                Lädt...
                X