"MACH DEINE SEITE JETZT FIT,
    DER nächste SOMMER KOMMT BESTIMMT!"

    Lust auf eigene Buttons? Mit diesem Tutorial bekommst Du sie. Füge einfach folgenden Code in den Head-Bereich Deiner Jimdo-Seite ein:

    <style type="text/css">
    /*<![CDATA[*/

    /*Deine Slideshow*/

     

    .button a {
        
    background: #F7F2E0;
    display: block;    
    padding: 10px;
    color: black;
    width: 65px;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
    text-decoration: none;
    text-underline: none;
    transition-property: background-color;
    transition-duration: 1s; }
       
    .button a:hover {

     

    background-color: #0080FF;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

     

    }    

    /*]]>*/
    </style>

     

    Die Ausgangs-Farbe des Buttons (rot markiert) kannst Du durch einen Farbcode Deiner Wahl ersetzen.

    Die Breite des Buttons (blau markiert) kannst Du auch ganz individuell anpassen.

    Die Hover-Farbe (grün markiert), also wenn die Maus auf dem Button steht, kannst Du ebenfalls durch einen eigenen Farbcode austauschen.

     

    Farbcodes findest Du z. B. hier: http://html-color-codes.info

     

     

    Folgenden Code musst Du noch auf einer Seite Deiner Wahl in ein Widget/HTML-Modul einfügen:

     

    <div class="button">
        <a href="DEIN LINK">TEXT</a>
    </div>

     

    Den Link, also wohin man weitergeleitet werden soll, kannst Du hier (rot markiert) einfügen.

    Die Button-Bezeichnung änderst Du hier (grün markiert).

    Kommentare: 56
    • #56

      West (Montag, 04 September 2017 23:01)

      Tolle Buttons. Hoffe da kommen noch ein par. Sind ja schon ein bisschen älter

    • #55

      Dormutil (Donnerstag, 19 Januar 2017 00:27)

      Coole Buttons.. Viel Erfolg für das neue Jahr

    • #54

      Super Silver (Dienstag, 10 Januar 2017 11:37)

      Frohes neues Jahr an alle

    • #53

      Marlboro (Mittwoch, 14 Dezember 2016 10:41)

      Tolle buttons

    • #52

      Lisa Kruss (Montag, 28 November 2016 12:16)

      Tolle Buttons.. aber kommen da eigendlich auch noch mehr?

      Gruß Lisa

    • #51

      Karin Klein (Samstag, 05 November 2016 13:43)

      finde hier sind die besten buttons

    • #50

      Zigaretten steuerfrei (Freitag, 30 September 2016 19:27)

      Sehr gute Buttons... Bin beindruckt

    • #49

      Nicolas (Sonntag, 31 Juli 2016 13:49)

      Wieso ist bei mir der Text blau und unterstrichen?

      Gruss aus Zürich

    • #48

      Weed online kaufen (Montag, 27 Juni 2016 21:45)

      Super tolle Buttons. Werde ich gleich mal ausprobieren.

      Gruß aus Halle

    • #47

      hasch (Donnerstag, 03 März 2016 20:40)

      Super danke schön... Grüße aus dem Schwarzwald

    • #46

      Tobias (Dienstag, 01 März 2016 00:04)

      Cool, danke ^^

    • #45

      GLiveXL (Samstag, 03 Oktober 2015 18:49)

      Achtung!!! Das ist ein Virus!

    • #44

      Angelica (Donnerstag, 27 August 2015 13:12)

      Danke für diesen tollen Input. Ich möchte auf einer Zeile mehrere Buttons als Seitennavigation integrieren. Nun, wie ist es möglich den Abstand zwischen den Buttons zu verringern? Muss ein zusätzlicher Eintrag in Widget/HTML-Modul eingetragen werden?

      Grüsse
      Angelica

    • #43

      brekergrafik1 (Sonntag, 29 März 2015 00:53)

      Danke, es funktioniert.

    • #42

      truefabrics (Freitag, 06 Februar 2015)

      hi,

      spitzen seite hier, bin begeistert. ich versuche gerade, den gesamten button im widget-feld zu zentrieren und schaffen es nicht. habe dazu nirgendswo was gefunden. wäre super, wenn mir jemand helfen kann...

    • #41

      KONTENT (Freitag, 06 Februar 2015 00:52)

      text ist unscharf. woran liegts?
      Liebe Grüße

    • #40

      f (Dienstag, 30 Dezember 2014 22:00)

      Super, vielen Dank für die Hilfe!

    • #39

      leavingagain2014 (Freitag, 26 Dezember 2014 17:28)

      Hey,
      Zuallererst deine Tutorials gefallen mir total gut! Ich habe eine Frage. Ich möchte auf meiner Website einen Button erstellen der mich dann zu meiner zweiten Website führt. Die Websites sind beide gleich nur das die eine auf deutsch und die andere auf englisch ist. Für den Button "ENGLISH" möchte ich als Hintergrund die amerikanische oder britische Flagge verwenden, wie ist das möglich? UND... Wie kann ich den Button an eine beliebige stelle auf meine Website verschieben?

      Vielen Dank!

    • #38

      play-fifa-15 (Sonntag, 23 November 2014 09:00)

      Hallo !
      Ich habe ein klitzekleines Problem und bitte um Hilfe:
      Wie bei deinen Beispiel-Buttons, ist der Text in denen bei mir unscharf. Wie kriege ich den Text der Buttons so scharf, wie bei deinen Tutorial-Buttons (ganz unten) ?

    • #37

      f (Sonntag, 16 November 2014 21:07)

      Hat sich geklärt

    • #36

      f (Sonntag, 16 November 2014 17:35)

      Guck bitte auf meiner Webseite (http://meine-html-codes.jimdo.com/) die Buttons an. Wie man sieht werden sie flüssig größer (bei Mouseover) aber wenn du vom Button runtergehst schnellen sie sofort zurück. Wie kann ich meine Buttons flüssig wieder kleiner werden lassen (kein Mouseover) so wie bei deiner unten eingeblendeten Tutorial-Liste ?

    • #35

      Alexander Groh (Montag, 27 Oktober 2014 10:11)

      ziehe die Frage zurück, ich habe, sorry!

    • #34

      Alexander Groh (Montag, 27 Oktober 2014 09:55)

      Hi,
      zunächst vielen Dank für die tollen Tutorials auf dieser Seite!
      Eine kurze Frage zu den Buttons hätte ich: Ich habe diese schon vor einiger Zeit eingebunden und nach meinen Wünschen angepasst - hat alles super funktioniert. Nun ist seit heute die Schrift schwarz und ich kann sie nicht ändern - weder in weiss wie zuvor noch in irgend eine andere Farbe. Habe die Buttons schon komplett neu eingebunden etc. - es lässt sich alles wie gewohnt anpassen, nur die Schriftfarbe nicht mehr! Was ist hier passiert und wie kann ich das lösen?
      Vielen Dank schonmal und beste Grüße
      Alex!

    • #33

      Diazepam kaufen (Sonntag, 14 September 2014 23:41)


      Hallo, mir hat Deine Webseite sehr gefallen, auf die ich heute durch Zufall gekommen bin. Du hast Dir sehr viel Mühe gegeben! Freue mich natürlich immer auch auf einen Gegenbesuch bei mir.
      Weiterhin viel Erfolg mit Deiner Seite wünscht Dir Michael!

    • #32

      Dirk (Mittwoch, 10 September 2014 06:11)

      Habe ein Problem mit der Anzeige habe die Codes eingefügt wie beschrieben aber der button wenn ich raufdrücke sagt er mir upps sie sind nicht mehr angemeldet bitte neu anmelden. Was habe ich falsch gemacht.
      Gruß Dirk

    • #31

      Tom Iwan (Sonntag, 10 August 2014 17:55)

      Hat geklappt, Super!

    • #30

      in-guter-gesellschaft (Samstag, 02 August 2014 21:24)

      ziehe die Frage zurück

      ich habs!!!!

      habe den gesamten Link inklusive http://eingegeben, dann klappts

      Also das hat sich erledigt
      Liebe Grüße

    • #29

      in-guter-gesellschaft (Samstag, 02 August 2014 21:17)

      super, dass du Dein Know-How an uns (mich als HTML Laie ;-)) weitergibst!!! danke Dir sehr dafür!!!

      Jetzt zu meiner ersten Frage (weitere kommen bestimmt noch smile):

      Die Verlinkung klappt bei mir leider nicht
      habe unter "DEIN LINK" meine Seite "Leistungen" eingegeben - dann erscheint die Fehlermeldung diese Seite existiert nicht mehr oder Tippfehler ....

      was mache ich falsch?

      Lieben Dank für Deine Hilfe
      Sonja

    • #28

      lienert-kerzen (Sonntag, 27 April 2014 21:48)

      Funktioniert - grossartig, besten Dank und Gruss

    • #27

      Kathrin Müller (Montag, 14 April 2014 20:54)

      Hi - der Einbau hat wunderbar funktioniert. Meine Frage wäre allerdings, wie ich die Abstände von Button zu Button ändern kann und wie ich 2 verschiedend aussehende Buttons auf einer Seite einbaue... was müsste ich zusätzlich im Headbereich und im Widget-Modul dafür angeben?

      Besten Dank schon mal + Lg

    • #26

      mywayimmobilien (Montag, 07 April 2014 21:05)

      Hallo,

      auch ich möchte mich erst einmal bei Dir für diese tolle Seite bedanken. Auch als Laie verstehe ich (fast) alles. Prima.

      Meine Frage: Wie kann ich so einen hübschen Button erstellen, wie der bei Dir oben linke auf der Seite (Rund mit Deinem Logo), der immer stehen bleibt, während die Seite "darunter" wegscrollt. Er scheint über der Seite zu "schweben". Und wie heißt so ein Ding.

      Danke und liebe Grüße

    • #25

      eplusu (Mittwoch, 05 Februar 2014 13:36)

      habs grad schon gesehen, dass du den Tipp schon genannt hast ----und es hat geklappt auch mit der Schrittart:-)

    • #24

      eplusu (Mittwoch, 05 Februar 2014 13:30)

      Wow, tolle Seite!!
      Das mit den Buttons hat geklappt. Was ich nicht gefunden habe ist, wie ich die Schrift innerhalb des Buttons editieren kann. Die Grösse sehe ich , aber ich habe keine Schriftart entdeckt. Wie kann ich das machen. Ausserdem frage ich mich, was, wenn ich zwei verschiedene Grössen von Buttons möchte, hab ja nur einen Head:-) sorry, vielleicht ist diese Frage sehr banal, aber ich bin eben erst am Anfang...Danke für ein Feedback und einen liebe Grüsse

    • #23

      Sarah Drüsedau (Samstag, 04 Januar 2014 20:47)

      Hallo, ich habe diesen Button bei mir auf der Homepage eingefügt.
      Laptop und PC funktioniert und sieht gut aus.
      Ansicht auf dem IPAD und auf dem Handy verschiebt sich der Button.

      Woran kann das liegen?

    • #22

      Marie (Sonntag, 01 Dezember 2013 15:46)

      Eigentlich müssten sie nur innerhalb des Spaltenelements links sitzen, dann würde es passen. Nun sind sie ja mittig innerhalb der Spalte ausgerichtet....

    • #21

      Marie (Sonntag, 01 Dezember 2013 15:30)

      Hallo! Eine Frage, wir möchten die Seite nun doch nochmal umbauen, gibt es einen einfachen Befehl, wir wir die Buttons (die ja in Spalten angelegt sind) mehr nach links bekommen, also wie man sie weiter nach links ziehen kann? Ich hoffe Du verstehst was ich meine. Wenn man also z.b. möchte, das Deine Buttons hier oben ganz links bündig sind mit dem Rest vom Content.
      Vielen Dank!!

      Ich freu mich immer über tolle neue Tutorials, super! :)

    • #20

      Deine Slideshow (Montag, 01 Juli 2013 12:34)

      Das ist bestimmt möglich, hab ich aber noch nicht ausprobiert.
      Entweder änderst Du den Button selbst, oder man verlinkt diesen von einem neuen Button aus..

      Hast Du's schon versucht!?

      Viele Grüße.

    • #19

      Frank (Donnerstag, 27 Juni 2013 18:51)

      Ist es eigentlich möglich einen seperaten "Button" zum Warenkorb auf der Seite zu platzieren?

    • #18

      furnituredesigners2 (Mittwoch, 12 Juni 2013 17:10)

      Hey!
      Komisch, ich dachte ich hätte die Frage gestern gepostet, aber wohl doch nicht... ;)
      Ich würde gerne die Buttons oben an die Stelle der Navi ersetzen, da die Unternavipunkte (Home Contact About) immer nur zur jeweiligen Sprache angezeigt werden sollen, ohne eben die Sprachen oben als Text zu haben.
      Ich weiss einfach nicht wie ich das lösen kann, ich hatte die Idee die Buttons zu bauen und dann eben als Logo/Text oben hinzupacken. Aber das geht ja nicht, weil die Buttons aktiv sind. Irgendwie schnackelts nicht....Haddu eine Idee? Wäre super!! Vielen Dank!!

    • #17

      Deine Slideshow (Mittwoch, 08 Mai 2013 13:09)

      @ Steffen Neumann, Du kannst diese Anleitung benutzen und anstelle eines Bildes eine Grafik (Logo) einbinden: http://deine-slideshow.jimdo.com/hover/.

      @ schreinerei-kloeckner, hmmm vielleicht kannst Du nochmal genau erklären wie ich Dir weiterhelfen kann, danke.

      Viele Grüße.

    • #16

      schreinerei-kloeckner (Mittwoch, 24 April 2013 11:03)

      Habe eine Frage. Ist es auch möglich die Buttons wie auf der Seite kloeckner-kuechen.de zu erstellen? Ich möchte die Jimdo Seite gleich dieser erstellen. Danke für Hilfe

    • #15

      Steffen Neumann (Dienstag, 23 April 2013 23:07)

      Ist die Anleitung für die drehenen Buttons nun weg?

    • #14

      Steffen Neumann (Dienstag, 23 April 2013 23:04)

      Ist es möglich aus einem Logo einen Button zu machen? Auch mit Hover Effekt?
      Das wär superhübsch!

    • #13

      Felix Hannibal (Mittwoch, 27 Februar 2013 15:37)

      Super vielen Dank für die schnelle Antwort!

    • #12

      Deine Slideshow (Mittwoch, 27 Februar 2013 11:53)

      Ja das kannst Du. Nutze dazu am besten Google Web Fonts. Für die Schriftart "Yanone Kaffeesatz" z.B. müsstest Du zusätzlich folgendes in Deinen Head-Bereich einfügen: <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
      Und in meinem Code für den Head-Bereich müsstest Du nur noch folgendes ergänzen: font-family: 'Yanone Kaffeesatz', sans-serif;

      Viele Grüße.

    • #11

      Felix Hannibal (Montag, 25 Februar 2013 23:15)

      Echt top Seite! Würde nur gerne wissen ob es auch möglich ist die Schrift zu ändern? Schriftgröße 26 sieht ziemlich verpixelt aus :(

      MfG

      Felix

    • #10

      Werbeplatz (Dienstag, 29 Januar 2013 17:56)

      Wie hast du das hin bekommen mit dem Hover-Effekt?

    • #9

      Deine Slideshow (Dienstag, 29 Januar 2013 10:36)

      Hallo, den ersten Code musst Du in den "Head-Bereich" und den zweiten in ein "Widgt/HTML-Modul" einfügen. Dann sollte das auch funktionieren. Ich habs auch gerade nochmals getestet und alles war wunderbar ;-)

      Probier's doch nochmal.

      Viele Grüße.

    • #8

      chaotentreff (Montag, 28 Januar 2013 19:04)

      Hallo,

      Hey echt super deine Tutorials.
      Das mit den Buttons funzt bei mir nicht so richtig. Also selbst nach dem einfügen in den Header habe ich keine Veränderung zu ohne Header einfügen....

      Eventuell mache ich was falsch?
      Grüße

    • #7

      Deine Slideshow (Sonntag, 20 Januar 2013 20:18)

      Hallo David, Du kannst die Codes für den Head-Bereich einfach untereinander einfügen.

      Viele Grüße.