Tkinter Button

The Button widget from standard Tkinter library can be used to create buttons inside the GUI applications. It can display text, image, and can perform specific actions on various events like mouse clicks, mouse hover, etc. we can also customize its appearance by adding styling options.

Tkinter Button Syntax :

btn = Button(master ,**options)

Options

Here are the options that we can use to customize the tkinter button.

1.activebackground Set the background color when the button is active.
2.activeforeground Set the text color when the button is active.
3.anchorUse this option to control the text alignment of the button. default is CENTER.
4.backgroundUse this option to set the background color of the button.
5.borderwidthUse this option to set the border width of the button.
6.commandSet the function to be called on a mouse click.
7.compoundUse this option to control how to combine text and image.
8.cursorUse this option to control what cursor to display when the mouse hovers over the button.
9.disabledforegroundSet the background color of the button when it’s disabled.
10.fontSet the font for the button text.
11.foregroundSet the color of the text for the button.
12.heightUse this option to set the height of the button.
13.justifyUse this option to control how to align multiple lines of text. default is CENTER.
14.imageSet the image to display on the button.
15.padxUse this option to add extra horizontal padding between text and border.
16.padyUse this option to add extra vertical padding between text and border.
17.stateSet the state of button NORMAL (default), ACTIVE or DISABLED.
18.textSet the text to display on the button.
19.textvariableSet the text variable to control text on the button.
20.underlineUse this option to specify which char to underline default is -1 (means not char will be underlined.)
21.widthUse this option to set the width of the button.

Example 1: Basic Tkinter Button:

In this basic example, we will display a button on the window that will show the text “hello” and print the message ‘Hello World’ on mouse click.

Here is the code for that.

from tkinter import *

def hello():
    """Function to be called on button1 click"""
    print("Hello World")

window = Tk() # Create the window

# Create a button inside the window with text 'Hello'
# Run the function 'hello' on mouse click
b1 = Button(window,text="Hello",command = hello)
b1.pack() # Pack the button in the window

window.mainloop()

Here is the output of above code.

Output :

Button In tkinter simple example

Example 2 : Styled Buttons

In this example, We will use the above-discussed options to add some styling to buttons

from tkinter import *
from tkinter import ttk
# ttk module has better looking widgets

window = Tk() # Create the window

# ttk.Button has better styles than standard buttons
b1 = ttk.Button(window,text = "ttk btn")

# Simple button with styling
b2 = Button(window,text = "White",background = "black",
            foreground = "white",padx = 20 , pady = 10,
            font = ("verdana",10,"bold"))
# Note : you can also add hexadecimal values of colors

b1.pack()
b2.pack()

window.mainloop()

Output :

Button Example 2 output

Example 3: Button With Images

In the following example, We will display images in buttons.

We will be using the PIL library to load images. It’s not an inbuilt package so we have to install it using pip.

pip install pillow

here is the code to display image in button.

from tkinter import *
from PIL import ImageTk, Image

window = Tk()

# Create an image
img = ImageTk.PhotoImage(Image.open("call.jpg"))

# Add image to button
Button(window,  image = img).pack()

window.mainloop()

Output :

Button example 3 output

Example 4: Change A Counter Using Button

In this example, We will be using two tkinter buttons to increment and decrement a simple label counter. here is the code for that.

from tkinter import *

window = Tk()

COUNTER = 0

# Create a string var to control the label text
label_text = StringVar()
label_text.set("Counter : 0") # Set the text

def increment():
    # Function to increment counter
    global COUNTER
    COUNTER += 1

    # Now update the label text
    label_text.set(f"Counter : {COUNTER}")

def decrement():
    # Function to decrement counter
    global COUNTER
    COUNTER -= 1

    # Now update the label text
    label_text.set(f"Counter : {COUNTER}")

# Create label
Label(window,textvariable = label_text,
    foreground = "white",background = "black").pack()

# Create two buttons
Button(window,text = "Increment",
    command = increment).pack()
Button(window,text = "Decrement",
    command = decrement).pack()

window.mainloop()

Run the code and press the ‘increment’ and ‘decrement’ buttons you should see the counter value increasing and decreasing.

Output :

Button example 4 output.

That’s wrap for this tutorial.

Leave a Reply