Python GUI Button Design in Hindi

Python GUI Button Design in Hindi

Python GUI में Button Design — Complete Guide (हिंदी)

Tkinter, CustomTkinter और PyQt5 के साथ मॉडर्न और SEO-friendly Button डिजाइन — कोड उदाहरण सहित (सिखने वालों के लिए आसान भाषा)।

परिचय — Button क्या है?

GUI (Graphical User Interface) में Button एक क्लिक योग्य घटक है जो किसी क्रिया (action) को ट्रिगर करता है — जैसे फ़ॉर्म सबमिट करना, फ़ाइल खोलना या सूचनाएँ दिखाना। एक अच्छा बटन ना सिर्फ क्लिकेबल होता है, बल्कि दिखने में भी स्पष्ट और रिस्पॉन्सिव होना चाहिए।

1. Tkinter: शुरूआती (Beginner Friendly)

Python की इन-बिल्ट लाइब्रेरी Tkinter से शुरुआत करना सबसे आसान है। नीचे बेसिक और styled बटन के उदाहरण दिए गए हैं।

साधारण बटन (Simple Button)

import tkinter as tk

root = tk.Tk()
root.title("Simple Button Example")
root.geometry("300x200")

def clicked():
    print("Button clicked!")

btn = tk.Button(root, text="Click Me", command=clicked)
btn.pack(pady=20)

root.mainloop()

Stylish Button (Colors, Font, Border)

import tkinter as tk

root = tk.Tk()
root.title("Stylish Button")
root.geometry("300x200")

def show_message():
    label.config(text="आपने बटन क्लिक किया!")

label = tk.Label(root, text="", font=("Arial", 14))
label.pack(pady=10)

button = tk.Button(
    root,
    text="Click Me!",
    command=show_message,
    bg="#4CAF50",
    fg="white",
    font=("Helvetica", 12, "bold"),
    relief="raised",
    bd=5,
    padx=10, pady=5
)
button.pack(pady=20)

root.mainloop()

टिप: relief, bd, bg, और fg बदलकर अलग- अलग लुक बनाए जा सकते हैं।

2. CustomTkinter: मॉडर्न बटन

Rounded corners, hover effects और dark mode के लिए CustomTkinter श्रेष्ठ है।

# Installation:
# pip install customtkinter

import customtkinter as ctk

ctk.set_appearance_mode("dark")
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.geometry("300x200")
app.title("Modern Button")

def on_click():
    label.configure(text="बटन क्लिक हुआ!")

label = ctk.CTkLabel(app, text="", font=("Roboto", 14))
label.pack(pady=10)

button = ctk.CTkButton(
    app,
    text="Click Me",
    command=on_click,
    fg_color="#1E90FF",
    hover_color="#4682B4",
    corner_radius=25
)
button.pack(pady=20)

app.mainloop()

CustomTkinter से UI तुरंत modern दिखता है—खासकर जब आप dark/light mode support चाहते हैं।

3. PyQt5: Professional और Flexible

अगर आप production-grade desktop app बनाना चाहते हैं तो PyQt5 बेहतरीन विकल्प है। इसमें CSS जैसी styling संभव है:

# pip install pyqt5

from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout
import sys

app = QApplication(sys.argv)

window = QWidget()
window.setWindowTitle("PyQt5 Button Design")

layout = QVBoxLayout()

btn = QPushButton("Click Me")
btn.setStyleSheet("""
    QPushButton {
        background-color: #6200EE;
        color: white;
        font-size: 14px;
        font-weight: bold;
        border-radius: 10px;
        padding: 8px;
    }
    QPushButton:hover {
        background-color: #3700B3;
    }
""")

layout.addWidget(btn)
window.setLayout(layout)
window.show()

sys.exit(app.exec_())

PyQt5 में आप gradients, shadows और complex interactions बना सकते हैं—बड़ी professional apps के लिए उपयुक्त।

Quick Comparison

लाइब्रेरीलुकखासियतकब उपयोग करें
TkinterSimpleBuilt-in, LightweightBeginners
CustomTkinterModernRounded, Dark ModeIntermediate
PyQt5ProfessionalCSS Styling, AnimationAdvanced

प्रैक्टिकल टिप्स

  • बटन पर स्पष्ट टेक्स्ट रखें — जैसे "सबमिट", "क्लिक करें", या "बंद करें"।
  • Contrast अच्छा रखें ताकि बटन सभी स्क्रीन पर दिखाई दे — खासकर mobile पर।
  • Accessibility: keyboard navigation और screen-reader labels का ध्यान रखें।
  • Icon buttons: छोटे आइकन के साथ टेक्स्ट जोड़ें — उपयोगिता बढ़ती है।

Python GUI में 10 Modern Button Designs (Complete Beginner Guide)

Type Description Suitable For
Primary Default theme button Normal action
Gradient Eye-catching button Highlighted action
Outline Minimal border-only Cancel / Secondary actions
Success Green button Save / Done
Danger Red button Delete / Warning
Glass Transparent Fancy UIs
3D Slight shadow Raised effect
Pill Rounded edge Premium look
Dual-Tone Two shade effect Interactive UI
Icon Icon + Text combo App-style buttons

Step 1:pip install customtkinter

अब Python में GUI बनाना बहुत आसान हो जाएगा।

🔹 Step 2: Basic Window बनाना

import customtkinter as ctk

ctk.set_appearance_mode("light")  # 'dark' भी इस्तेमाल कर सकते हैं
ctk.set_default_color_theme("blue")  # Theme color

app = ctk.CTk()  # Main window create
app.geometry("400x600")  # Window size
app.title("10 Modern Button Designs")  # Title
यह कोड आपकी GUI विंडो तैयार कर देता है।

🔹 Step 4: Click Event Function

हर बटन पर क्लिक करने के बाद कुछ होना चाहिए —
इसके लिए हम एक simple function बनाते हैं:
def on_click(name):
    print(f"{name} button clicked!")

🔹 Step 5: Final Complete Code:

import customtkinter as ctk

ctk.set_appearance_mode("light")  # or "dark"
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.geometry("400x600")
app.title("10 Modern Button Designs")

def on_click(name):
    print(f"{name} button clicked!")

# 1️⃣ Simple Modern Button
btn1 = ctk.CTkButton(app, text="Primary Button", command=lambda: on_click("Primary"))
btn1.pack(pady=10)

# 2️⃣ Rounded Gradient Button (custom color)
btn2 = ctk.CTkButton(
    app, text="Gradient Feel", fg_color="#FF6B6B",
    hover_color="#FF4C4C", corner_radius=25,
    command=lambda: on_click("Gradient")
)
btn2.pack(pady=10)

# 3️⃣ Outline Button (border only)
btn3 = ctk.CTkButton(
    app, text="Outline Button", fg_color="transparent",
    border_width=2, border_color="#1E90FF",
    text_color="#1E90FF", hover_color="#E6F0FF",
    command=lambda: on_click("Outline")
)
btn3.pack(pady=10)

# 4️⃣ Success Button (green tone)
btn4 = ctk.CTkButton(
    app, text="Success", fg_color="#16a34a", hover_color="#15803d",
    command=lambda: on_click("Success")
)
btn4.pack(pady=10)

# 5️⃣ Danger / Alert Button
btn5 = ctk.CTkButton(
    app, text="Delete", fg_color="#dc2626", hover_color="#b91c1c",
    command=lambda: on_click("Danger")
)
btn5.pack(pady=10)

# 6️⃣ Glass / Transparent Style
btn6 = ctk.CTkButton(
    app, text="Glass Effect", fg_color="transparent",
    border_width=1, border_color="#aaa",
    text_color="#444", hover_color="#f1f5f9",
    command=lambda: on_click("Glass")
)
btn6.pack(pady=10)

# 7️⃣ Shadow / 3D Effect (using raised border color illusion)
btn7 = ctk.CTkButton(
    app, text="3D Raised", fg_color="#2563eb",
    hover_color="#1d4ed8", corner_radius=10,
    command=lambda: on_click("3D")
)
btn7.configure(height=40)
btn7.pack(pady=10)

# 8️⃣ Pill Button (fully rounded)
btn8 = ctk.CTkButton(
    app, text="Pill Button", fg_color="#9333ea",
    hover_color="#7e22ce", corner_radius=40,
    command=lambda: on_click("Pill")
)
btn8.pack(pady=10)

# 9️⃣ Dual-Tone Button (manual gradient simulation)
btn9 = ctk.CTkButton(
    app, text="Dual-Tone", fg_color="#3b82f6",
    hover_color="#2563eb", corner_radius=15,
    text_color="#ffffff", command=lambda: on_click("Dual-Tone")
)
btn9.pack(pady=10)

# 1️⃣0️⃣ Icon + Text Button (needs Pillow if image used)
from PIL import Image
icon = ctk.CTkImage(light_image=Image.new("RGB", (20,20), "blue"), dark_image=Image.new("RGB", (20,20), "blue"), size=(20,20))
btn10 = ctk.CTkButton(
    app, text="Icon Button", image=icon, compound="left",
    fg_color="#f97316", hover_color="#ea580c",
    corner_radius=25, command=lambda: on_click("Icon")
)
btn10.pack(pady=10)

app.mainloop()
text → बटन पर दिखने वाला नाम।
command → जब क्लिक हो, तो कौन-सा function चले।
pack(pady=10) → बटन के चारों ओर space दे देता है।
fg_color → बटन का मुख्य रंग।
hover_color → जब माउस ऊपर आए तब का रंग।
corner_radius=25 → कोनों को गोल कर देता है।
CTkImage से छोटा आइकन बनाया गया।
compound="left" → आइकन text के बाएँ दिखेगा।
fg_color="transparent" → अंदर का हिस्सा पारदर्शी।
border_color और border_width → नीला बॉर्डर बनाते हैं।
text_color → टेक्स्ट का रंग नीला किया गया है।
Normal और hover color में हल्का फर्क → 3D depth illusion बनाता है।
Rounded corners से बटन थोड़ा उठा हुआ लगता है।

Output:

Python GUI में 10 Modern Button Designs (Complete Beginner Guide)

निष्कर्ष

Python GUI में बटन डिज़ाइन करना सरल है पर details (padding, color, hover, accessibility) पर ध्यान देने से आपकी एप professional दिखेगी। Beginners Tkinter से शुरू करें, फिर CustomTkinter से modern लुक लें और जब ज़रूरत हो PyQt5 में advanced UI बनाएं।

Previous Post Next Post

Contact Form