Create Modern Buttons With Tkinter in Python | Tkinter GUI Button Design in Python

in this video I'm gonna show you how to make really really cool modern looking buttons in TK enter for your python guide applications so first of all let's import TK inter as TK Perfect 10 we're going to create the root window so tk.tk and then I want this to be 350 by 300 like that and then I don't want this to be resizable so I'm gonna set the with pause height Force as well then here I'm gonna have four variables with the colors that I'm gonna use so you can actually change them with your own colors so color one zero to zero F12 now let's do this so two three four like that so this is going to be 0 5 d7ff then 65 e7ff and then this easy black like that perfect then we can create a Mainframe so TK frame like that the parent is the root and then the background color is the color one like that and then a padding part y 40 then I'm gonna place this in the window so fill to get both like that and then expand through like that and then we need to configure The Columns actually the column because we're just gonna have one so zero weight one so it stretches horizontally then the Mainframe row configure and then we are gonna have we're gonna have two rows so we'll configure one to the second row perfect and now we can actually create the button so button one is equal to TK button and then the parent is going to be the Mainframe of course the background color is the color two in this case and this is the background when you don't hover over it so the color four is the foreground which is the color of the text basically the active background is color three okay and this is basically the background and the foreground when you hover over the button so when the button is basically active then you've got highlight thickness and I'm gonna give it two pixels and then here you've got two possible colors so you've got the Highlight background which is basically the color of the Highlight around the bottom when the button doesn't have focus and I want this to be color two so you don't see anything and then you've got the highlight color and this color is basically the one that will be used when the button has Focus which is basically when you switch from one widget to the other using the top key and I want to set this to White like that then the width 13 then the height I'm gonna give it a height of two because these are not pixels they are the characters or the lines High 2 basically means two lines and with 13 means 13 characters something like that then the Border zero I don't want it because hand one because I want this to be like sort of oh I can click on this then the text is going to be login like that and then default that as I always say you can do whatever you want with these parameters I just chosen to to do something like that but you can change the font and whatever the colors it is set Etc now we've got a button so we need to actually place it in the frame so we're gonna use grid and is going to be the first column of course we just have one and then the first row perfect and of course we need to start the main Loop otherwise we are not going to see anything so let's see what we've done so far so let's do this as you can see this looks already pretty good and you can see around this here you've got this little sort of Border this is the highlight and as I said this is fine when you don't hover over it because this is the same as the background but when you change the color the active color you see that but you cannot do this with the parameters because you don't have an active highlight background so we're gonna do that in a different way later on if you hit the top you can see the active color so I'm gonna hit tab as you can see this is active this will jump from one button to the other when you hit tab basically so let's actually add the button too right now and we're just going to actually copy this and change a few things so let's do this like that so button two we're going to change the color and the other color like that also here sign up of course and then button two here okay and then row perfect so let's run it now and see what we actually get as you can see you get this thing here let's actually have something white behind so as you can see now you can see that beta and these are really really modern looking buttons as you can see when you hover over it you've got this in fact as you can see and let's see actually by hitting tab so now this has the focus and then this one transform one to the other really really nice so now as I said let's see how you can change the parameters when you hover over the buttons by the way I would really appreciate it if you gave this video a like and also hit that subscribe button so that you don't miss future videos like this one as I was saying the parameters that we can actually enter when creating the buttons are limited and we only have a few things that will change when we have our button like the active color for example active background active foreground Etc so to change other parameters like the Highlight background because we don't have an active highlight background we need to actually use events okay and that's what we are going to do now so let's close this right now so first of all I'm going to Define a function which is called bt1 enter event I need to pass the event because basically when you bind a function to an event TK enter will basically pass an event to the function and if you don't write this even if you don't actually need it you will get something like zero arguments expected one given something like that so you just need to do that and then we're going to do something like bottom one config and when we this is when we actually enter when we hover over the button so we want the color to change to the color three then down here we are going to do something like leave okay when you are not hovering over the button anymore I want this to be color 2 like that so we want this to go back to normal and then the same thing for the button two so button two here and then button to here of course we need to change the button to here as well because otherwise We're not gonna get the result that we want okay so something like that and of course we need to bind those functions to the events so button one bind and we're gonna bind this to the enter event I'm going to bind the button on enter and then leave button one leave like that and then we are going to do the same exact thing for the button two so button two button two and of course buttons you enter and button to leave so let's actually see if that works as expected so let's actually add a white background so you can see that better okay so as you can see now you don't have the Highlight around the button as you can see you don't have that and if we were to change that to so to actually see the the change red for example you'll see that you get red as you can see you get red okay so this is just to to show you that something is actually happening okay so let's go back to color three like that perfect okay so now if you want to learn even more about Python and tkinta I highly recommend you go and watch the video you see on the screen also don't forget to like this video And subscribe to the channel for more videos like this and see you in the next one bye

Channel: Fabio Musanni - Programming Channel

Views: 14,715

Keywords: python, python3, programming, coding, learn python, python tutorial, python for beginners, python tkinter, python tkinter gui tutorial, python tkinter gui, python modern button, tkinter buttons python, tkitner style buttons, tkinter modern buttons, tkinter button style, tkinter cool button, how to create modern button tkinter python, how to style buttons in tkinter, python tutorial for beginners

Id: ghjfOPk-vs4

Length: 9min 25sec (565 seconds)

Published: Wed Apr 12 2023