navigation Navigation


Inhaltsverzeichnis

Button


Das Button-Widget von Tkinter ist das zentrale Bedienelement vieler Desktop-Anwendungen: Es löst Aktionen aus, bestätigt Eingaben oder steuert den Ablauf komplexer Workflows. Der Artikel beschreibt, wie Buttons erstellt, gestaltet und mit Events verknüpft werden, welche Optionen für Icons, Text oder Zustände bereitstehen und wie sich Interaktionskonzepte konsistent in bestehende Oberflächen integrieren lassen.

Inhaltsverzeichnis

    Widget - Button

    Was ist Button?

    Ein Button ist in interaktives Widget in Tkinter. Er führt eine Aktion aus, wenn der Nutzer darauf klick.

    Wann soll man Button verwenden?

    ✅ Geeignet für:

    • Formular absenden (“Ok”, “Speichern”, “Senden”)
    • Aktionen auslösen (“Öffnen”, “Löschen”, “Start”)
    • Navigation (“Weiter”, “Zurück”, “Schließen”)
    • Funktionen aufrufen (Berechnen, Exportieren, etc.)
    • Dialoge öffnen
    • Zustandsänderungen (“Start/Stopp”, “Pause/Play”)

    ⚠️ Weniger geeignet für:

    • An/Aus Zustände => Checkbutton
    • Auswahl zwischen Optionen => Radiobutton
    • Dropdown-Menü => OptionMenu oder Combobox
    • Nur Anzeige => Label

    Wichtige Button-Konzepte

    Callback-Funktion

    Man kann bei einem Button eine Callback-Funktion verknüpfen, welche ausgeführt wird, wenn man auf den Button klickt.

    def my_function():
        print("Button was clicked")
    
    button = tk.Button(
        master=root,
        text="Click me",
        command=my_function
    )

    Wichtig: Die Funktion wird übergeben my_function, nicht aufgerufen (❌) my_function().


    Button-States (Zustände)

    Ein Button kann folgende Zustände haben.

    • normal: Button ist klickbar (Standard)
    • active: Button wird gerade geklickt (automatisch)
    • disabled: Button ist deaktiviert und nicht klickbar

    Lambda-Funktionen für Parameter

    Um an einen Button Parameter zu übergeben, können wir Lambda-Funktion verwenden.

    def say_hello(name):
        print(f"Hallo {name}")
    
    button = tk.Button(
        master=root,
        text="Click me",
        command=lambda: say_hello("John")
    ).pack(pady=10)

    Übersicht - Parameter und Funktionen

    Parameter

    Hier ist eine Auflistung der wichtigsten Button-Parameter. Einige von diesen Parametern sind identisch mit den Parametern, aus dem Label-Widget.

    Aktion & Funktion

    ParameterTypBeschreibungBeispielHinweise
    commandcallableFunktion bei Klickcommand=save_fileOHNE () - sonst sofort ausgeführt!

    Text & Inhalt

    ParameterTypBeschreibungBeispielHinweise
    textstrButton-Beschriftungtext="Speichern"Kann mehrzeilig sein
    textvariableVariableStringVar für dynamischen Texttextvariable=varText ändert sich automatisch mit Variable
    imagePhotoImageBild auf Buttonimage=iconReferenz muss erhalten bleiben!
    bitmapstrEingebautes Bitmapbitmap="info"Built-in Icons
    compoundstrText+Bild Anordnungcompound="left"Werte: left, right, top, bottom, center

    Schrift & Farben

    ParameterTypBeschreibungBeispielHinweise
    fonttupleSchriftartfont=("Arial", 12, "bold")(Familie, Größe, Stil)
    fg/foregroundstrTextfarbefg="white"Normalzustand
    bg/backgroundstrHintergrundfarbebg="#4CAF50"Normalzustand
    activeforegroundstrTextfarbe beim Klickenactiveforeground="yellow"Während Mausklick
    activebackgroundstrHintergrundfarbe beim Klickenactivebackground="#45a049"Visuelles Feedback
    disabledforegroundstrTextfarbe wenn disableddisabledforeground="gray"Ausgegraut

    Größe & Layout

    ParameterTypBeschreibungBeispielHinweise
    widthintBreite in Zeichenwidth=20Bei Bild - Pixeln
    heightintHöhe in Zeichenheight=2Bei Bild - Pixeln
    padxintHorizontaler Innenabstandpadx=20Abstand Text zu Rand
    padyintVertikaler Innenabstandpady=10n, ne, e, se, s, sw, w, nw, center
    anchorstrText-Positionanchor="w"Visuelles Feedback
    justifystrAusrichtung bei mehrzeiligem Textjustify="center"left, center, right

    Rahmen & Stil

    ParameterTypBeschreibungBeispielHinweise
    reliefstr3D-Effektrelief="raised"flat, raised, sunken, groove, ridge
    bd/borderwidthintRahmendickebd=3In Pixeln
    highlightthicknessintFocus-Rahmenhighlightthickness=2Rahmen bei Fokus
    highlightbackgroundstrFocus-Farbe (ohne Fokus)highlightbackground="gray"Sichtbar ohne Fokus
    highlightcolorstrFokus-Farbe (mit Fokus)highlightcolor="blue"Zeigt Tastatur-Fokus

    Verhalten & Zustand

    ParameterTypBeschreibungBeispielHinweise
    statestrButton-Zustandstate="disabled"normal, active, disabled
    cursorstrMauszeiger-Formcursor="hand2"z.B. hand2, arrow, cross
    takefocusboolTab-Navigationtakefocus=TrueMit Tab erreichbar
    underlineintUnterstrichener Buchstabeunderline=0Index des Buchstabens (für Shortcuts)
    wraplengthintAutomatischer Zeilenumbruchwraplength=100Text bricht nach n Pixeln um
    defaultstrDefault-Buttondefault="active"Reagiert auf Enter (normal, active, disabled)

    Wichtige Funktionen

    MethodeBeschreibungBeispiel
    configure(**options)Ändert Optionenbutton.config(text="Neu", state="disabled")
    invoke()Löst Button-Klick ausbutton.invoke()
    flash()Button blinkt kurzbutton.flash()
    cget(option)Liest Optiontext = button.cget("text")

    Button-Events

    EventWannVerwendung
    <Button-1>Linksklickbutton.bind("<Button-1>", callback)
    <Enter>Maus betrittHover-Effekte
    <Leave>Maus verlässtHover-Effekte entfernen
    <ButtonPress>Maus gedrücktDrag-Operationen
    <ButtonRelease>Maus losgelassenDrag-Operationen

    Button - Beispiele

    Nun schauen wir uns verschiedene Beispiele zur Verwendung von Buttons in Tkinter mit verschiedenen Konfigurationen an.

    Grundlegende Verwendung

    Beispiel
    import tkinter as tk
    
    root = tk.Tk()
    root.title("Label - Parameter")
    root.geometry("400x200")
    
    my_font=("Noto Sans", 14)
    
    def my_func():
        label_one.configure(text="Button geklick")
    
    label_one = tk.Label(
        master=root,
        text="---",
        bg="lightblue",
        font=my_font
    )
    label_one.pack(ipadx=10, pady=10)
    
    tk.Button(
        master=root,
        text="Klick mich",
        command=my_func
    ).pack(pady=10)
    
    root.mainloop()

    Wenn wir nun diesen Code ausführen, erhalten wir folgendes Fenster, in welchem wir auf einen Button klicken und eine Funktion auslösen können.

    Tkinter - Button - Basis Verwendung (1)

    Vor dem Klick

    Tkinter - Button - Basis Verwendung (2)

    Nach dem Klick

    Button Text aktualisieren

    Mit Hilfe des text oder des textvariable Parameter ist es möglich den Text am Button zu setzen und auch zu aktualisieren.

    In diesem Beispiel schauen wir uns, wie es möglich ist, den Text des Buttons mit textvariable zu aktualisieren.

    Beispiel
    import tkinter as tk
    
    root = tk.Tk()
    root.title("Label - Parameter")
    root.geometry("400x200")
    
    my_font=("Noto Sans", 14)
    
    def update_button_text():
        global button_value
        button_value.set("Neuer Wert")
    
    button_value = tk.StringVar(value="Initialer Wert")
    button_one = tk.Button(
        master=root,
        textvariable=button_value,
        bg="lightblue",
        font=my_font
    )
    button_one.pack(ipady=10, ipadx=10, pady=10)
    
    
    button_two = tk.Button(
        master=root,
        text="Aktualisiere Text",
        font=my_font,
        command=update_button_text
    )
    button_two.pack(pady=10)
    
    root.mainloop()
    

    Führen wir diesen Code aus, können mit einem Button den Text des anderen Buttons aktualisieren. Beachte, dass unter macOS das Styling der Buttons nicht optimal funktioniert und deswegen unsere gesetzte Hintergrundfarbe nicht zu sehen ist. Hier geht allerdings primär um die Änderung des Textes.

    Tkinter - Button - Text-Änderung (1)

    Vor dem Klick

    Tkinter - Button - Text-Änderung (2)

    Nach dem Klick

    Das gleiche Ergebnis erzielen wir, wenn wir statt dem Parameter textvariable den Parameter text verwenden.

    Beispiel
    import tkinter as tk
    
    root = tk.Tk()
    root.title("Label - Parameter")
    root.geometry("400x200")
    
    my_font=("Noto Sans", 14)
    
    def update_button_text():
        button_one.configure(text="Neuer Wert")
    
    button_one = tk.Button(
        master=root,
        text="Initialer Wert",
        bg="lightblue",
        font=my_font
    )
    button_one.pack(ipady=10, ipadx=10, pady=10)
    
    
    button_two = tk.Button(
        master=root,
        text="Aktualisiere Text",
        font=my_font,
        command=update_button_text
    )
    button_two.pack(pady=10)
    
    root.mainloop()
    

    Das Ergebnis wird visuell und vom Verhalten her identisch sein.

    Tkinter - Button - Text-Änderung (1)

    Vor dem Klick

    Tkinter - Button - Text-Änderung (2)

    Nach dem Klick

    Bild im Button

    Tkinter bietet uns die Möglichkeit, ein Bild im Button zu verwenden. Dafür ist es empfehlenswert die sehr mächtige Bibliothek pillow zu installieren. Um das nach den neusten Python-Standards tun zu können, brauchen wir eine virtuelle Umgebung.

    Erstellen wir also einen Ordner und definieren dort eine virtuelle Umgebung.

    mkdir button_image
    cd ./button_image
    
    python -m venv venv
    source venv/bin/activate

    Nun können wir die Bibliothek installieren.

    pip install pillow

    Damit wir auch ein Bild haben, bitte ein bestimtes Bild vorbereiten. In meinem Fall nehme ich folgendes Ausgangsbild.

    Tkinter - Button - Bild im Button (1)

    Vor dem Klick

    Nun schreiben wir unseren Code für die Verwendung dieses Bildes in einem Button.

    Beispiel
    import tkinter as tk
    from PIL import Image, ImageTk
    
    root = tk.Tk()
    root.title("Button Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 14)
    
    my_img = Image.open("./wheel.png")
    my_img = my_img.resize((32, 32))
    print(my_img.size)
    
    my_photo = ImageTk.PhotoImage(my_img)
    
    button = tk.Button(
        master=root,
        text="Klick mich",
        image=my_photo,
        compound="left"
    )
    button.image = my_photo
    button.pack(padx=20, pady=20)
    
    root.mainloop()

    Tkinter - Button - Bild im Button (2)


    Bitmap im Button

    Die Bitmaps werden nicht so oft verwenden, können aber problemlos. Der Vorteil ist, dass es einige eingebaute gibt, welche sofort verwendet werden können.

    Beispiel
    import tkinter as tk
    
    root = tk.Tk()
    root.title("Button Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 14)
    
    
    button = tk.Button(
        master=root,
        text="Klick mich",
        bitmap="info",
        compound="left"
    )
    button.pack(padx=20, pady=20, ipady=10, ipadx=10)
    
    root.mainloop()

    Tkinter - Button - Bitmap im Button


    Position im Button

    Nun schauen wir uns den Parameter compound einmal an. Dafür brauchen wir wieder ein Bild. In meinem Fall werde ich das Bild von oben (Zahnrad) verwenden.

    Denkt dran, wir brauchen hier wieder eine virtuelle Umgebung.

    Beispiel
    import tkinter as tk
    from PIL import Image, ImageTk
    
    root = tk.Tk()
    root.title("Button Beispiele")
    root.geometry("500x400")
    
    my_font = ("Noto Sans", 14)
    
    my_img = Image.open("./wheel.png")
    my_img = my_img.resize((32, 32))
    
    my_photo = ImageTk.PhotoImage(my_img)
    
    positions = ["left", "right", "top", "bottom", "center"]
    
    for pos in positions:
        button = tk.Button(
            master=root,
            text=f"compound='{pos}'",
            image=my_photo,
            compound=pos,
            padx=10,
            pady=5
        )
        button.image = my_photo
        button.pack(pady=5)
    
    root.mainloop()

    Das Ergebnis zeigt, wie das Bild und Text jeweils im Button angeordnet sein wird, in Abhängigkeit davon, welcher Wert beim compound Parameter verwendet wurde.

    Tkinter - Button - Compound Parameter Button


    Schrift im Button

    Die Schrift für einen Button wird fast identisch wie beim Label verwendet.

    Dazu ein kleines Beispiel mit mehreren Ausführungen.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("500x300")
    
    fonts = [
        ("Arial", 14),
        ("Noto Sans", 14),
        ("Noto Sans Mono", 14, "bold"),
        ("IowideMono", 16)
    ]
    
    for f in fonts:
        tk.Button(
            master=root,
            text=f[0],
            font=f,
            padx=20,
            pady=5
        ).pack(pady=5)
    
    root.mainloop()
    

    Als Ergebnis erhalten wir folgende Buttons mit unterschiedlichen Schrift-Konfigurationen. Beachte, dass bestimmte Schriften, welche nicht direkt als Datei eingebunden sind, auf dem System installiert sein müssen.

    Tkinter - Button - Schriften Beispiele


    Schriftfarbe im Button

    Für die Änderung der Schriftfarbe wird der Parameter fg bzw. foreground (voll ausgeschrieben) verwendet.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 16)
    
    colors = ["#246990", "#aa1313", "#298720"]
    
    for c in colors:
        button = tk.Button(
            master=root,
            text="Ein Button",
            font=my_font,
            fg=c
        )
        button.pack(pady=20)
    
    root.mainloop()

    Trotz der Tatsache, dass in macOS die Button (tk-Version) nicht vollständig die Anpassungen übernehmen, funktioniert dieser Parameter sehr wohl.

    Tkinter - Button - Schriftfarbe


    Hintergrundfarbe des Buttons

    Das ist der Fall, welche unter macOS nicht funktioniert. Hier wird die Hintergrundfarbe nicht korrekt angewendet. Unter Linux und Windows sollte es normal funktionieren.

    Hier der Code des Beispiels.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 16)
    
    colors = ["#246990", "#aa1313", "#298720"]
    
    for c in colors:
        button = tk.Button(
            master=root,
            text="Ein Button",
            font=my_font,
            fg="#ffffff",
            bg=c
        )
        button.pack(pady=20)
    
    root.mainloop()

    Hintergrundfarbe beim Klick

    Hier ist die Situation ähnlich. Unter macOS kann ich nicht vollständig euch einen Screenshot bieten, da die Hintergrundfarbe des Parameters activebackground ignoriert wird.

    Die Anwendung würde folgedermaßen aussehen.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 16)
    
    button = tk.Button(
        master=root,
        text="Ein Button",
        font=my_font,
        fg="#ffffff",
        activebackgrodun="lightblue"
    )
    button.pack(pady=20)
    
    root.mainloop()

    Schriftfarbe beim inaktiven Button

    Was wieder korrekt unter allen Betriebssystemen funktionieren sollte, ist die Schriftfarbe eines deaktivierten (inaktiven/ausgegrauten) Buttons.

    Hier habe ich 3 unterschiedliche Farben mit unterschiedlichen farblichen Abstufungen verwendet.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("500x300")
    
    my_font = ("Noto Sans", 16)
    
    colors = ["#444444", "#777777", "#bbbbbb"]
    
    for c in colors:
        button = tk.Button(
            master=root,
            text="Ein Button",
            font=my_font,
            disabledforeground=c,
            state="disabled"
        )
        button.pack(pady=20)
    
    root.mainloop()

    Wie man nach der Ausführung dieses Codes sehen kann, werden sie korrekt ausgegeben bzw. angewendet.

    Tkinter - Button - Schriftfarbe - inaktiver Button


    Größe und Breite des Buttons

    Die Parameter width und height behandle ich im nachfolgenden Beispiel im gleichen Schritt, da diese bis auf die Namen der Parameter und ihre Richtung sonst nahezu identisch verhalten.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("700x300")
    
    my_font = ("Noto Sans", 16)
    
    dimensions = [
        (10, 2),
        (15, 4),
        (20, 8)
    ]
    
    frame = tk.Frame(
        master=root
    )
    frame.pack()
    
    for d in dimensions:
        button = tk.Button(
            master=frame,
            text="Ein Button",
            font=my_font,
            width=d[0],
            height=d[1]
        )
        button.pack(pady=20, side="left")
    
    root.mainloop()

    Als Ergebnis wir 3 Button, die sowohl in der Breite als auch in der Höhe wachsen.

    Tkinter - Button - Breite und Höhe


    Abstand im Button

    Mit den Parametern padx und pady lässt sich der Innenabstand in einem Button steuern. Während pady für vertikalen Innenabstand zuständig ist, verantwortet padx den horizontalen Innenabstand.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("700x300")
    
    my_font = ("Noto Sans", 16)
    
    for i in range(10, 40, 10):
        tk.Button(
            master=root,
            text=f"padx/pady = {i}",
            font=my_font,
            padx=i,
            pady=i
        ).pack(pady=5)
    
    root.mainloop()

    Tkinter - Button - Innenabstand Beispiel


    Ausrichtung im Button

    Mit dem Parameter anchor ist es möglich, den Text im Button auszurichten. Folgende Ausrichtungsmöglichkeiten stehen dabei zur Verfügung.

    • n: Oben mittig (Nord)
    • ne: Oben rechts (Nord-Ost)
    • e: Rechts mittig (Ost)
    • se: Unten rechts (Süd-Ost)
    • s: Unten mittig (Süd)
    • sw: Unten links (Süd-West)
    • w: Links mittig (West)
    • nw: Oben links (Nord-West)
    • center: Zentriert

    Schauen wir uns wie immer dies an einem Beispiel an. Damit die Buttons besser platziert werden können, habe ich diesmal den Grid Layout-Manager verwendet.

    Beispiel
    import tkinter as tk
    
    
    root = tk.Tk()
    root.title("Button - Beispiele")
    root.geometry("800x300")
    
    my_font = ("Noto Sans", 16)
    
    anchors = ["n", "ne", "e", "se", "s", "sw", "w", "nw", "center"]
    
    cols = 3
    
    for i, a in enumerate(anchors):
        btn = tk.Button(
            master=root,
            text=f"Ausrichtung: {a}",
            font=my_font,
            anchor=a,
            height=2,
            width=14
        )
    
        current_row = i // cols
        current_col = i % cols
    
        btn.grid(
            row=current_row,
            column=current_col,
            padx=5,
            pady=5
        )	
    
    root.mainloop()

    Tkinter - Button - Ausrichtung im Button