Awesome Buttons in Pygame - Source Code

Hello Everyone, I hope you all are doing well. In this article, I will provide you the source code for Awesome Button in Pygame with Hover Effects and also when you click the button it will return a value equal to True. So, you can check that value using if condition and according to it you can take actions you want to occur on that button click. 

So without wasting any time let's start with the article. Also, if you like the content of the article share it on your social media coding communities so that more people can take advantage of the content.

Create a button.py file and paste the code given below. This completes the setup for creating a button class that you will import in your game and use the buttons.

import pygame
class Button(pygame.sprite.Sprite):
    def __init__(self,screen,pos_x,pos_y,BUTTON_WIDTH,BUTTON_HEIGHT,first_col,hover_col,text,text_col,font):
        pygame.sprite.Sprite.__init__(self)
        self.pos_x = pos_x
        self.pos_y = pos_y
        self.first_col = first_col
        self.hover_col = hover_col
        self.zoom_scale = 1.05
        self.screen = screen
        self.font = font
        self.BUTTON_WIDTH = BUTTON_WIDTH
        self.BUTTON_HEIGHT = BUTTON_HEIGHT

        self.Rect = pygame.Rect(self.pos_x,self.pos_y,self.BUTTON_WIDTH,self.BUTTON_HEIGHT)
        self.text_img = self.font.render(text, True, text_col)
        self.text_rect = self.text_img.get_rect()
        self.text_rect.center = (self.pos_x,self.pos_y)

    def action(self,click_x,click_y):
        if click_x > self.Rect.left and click_x < self.Rect.right and click_y > self.Rect.top and click_y < self.Rect.bottom:
            return True
        
        

    def draw(self,cursor_x,cursor_y):

        if cursor_x > self.Rect.left and cursor_x < self.Rect.right and cursor_y > self.Rect.top and cursor_y < self.Rect.bottom:
            btn_color = self.hover_col
            self.Rect.width = int(self.BUTTON_WIDTH * self.zoom_scale)
            self.Rect.height = int(self.BUTTON_HEIGHT * self.zoom_scale)

        else:
            btn_color = self.first_col
            self.Rect.width = self.BUTTON_WIDTH
            self.Rect.height = self.BUTTON_HEIGHT

        self.Rect.center = (self.pos_x,self.pos_y)
        pygame.draw.rect(self.screen, btn_color, self.Rect ,border_radius = 10)
                
        self.screen.blit(self.text_img,self.text_rect)

How to Use

1) How to call button class

First thing you have to do is to import the button.py file in python file of your game. Place the button.py file in the same directory as that of your game file.

import button

2) Create a button object

Now create a button object and pass the required parameter. Here are the details of all parameters.

screen - pygame.display.set_mode(...)

pos_x - x  co-ordinate of centre of button

pos_y - y - co-ordinate of centre of button

BUTTON_WIDTH - Width of button

BUTTON_HEIGHT - Width of height

first_col - Default color of the button

hover_col - Color that appears when mouse hovers on button

text - Text to be displayed on the button

text_col - Color for text

font - Pygame font for text

Note - Color is a tuple with RGB Values of the color

mybutton = button.Button(screen,pos_x,pos_y,BUTTON_WIDTH,BUTTON_HEIGHT,first_col,hover_col,text,text_col,font)

3) Draw button on Pygame Window

mybutton.draw(x,y)

Here, x and y are the co-ordinates of the current position of the mouse. You can get the position of the mouse using the following command.

x,y = pygame.mouse.get_pos()

4) Check for the Button Click

To check whether the button is pressed or not you have to pass the co-ordinates of the mouse when mouse button is pressed. For this place the below code in your main game loop.

for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
            click_x,click_y = pygame.mouse.get_pos()
            
            if mybutton.action(click_x,click_y):
                print("Button Clicked")
    

In place of printing button clicked, you will place the desired code or will call the desired function you want to run on button click.

Now, run your game and you will find a awesome button placed on your pygame screen according to the parameters you have passed. I had tried to keep all the possible parameters so that you can make your own choice of colours, text, font, etc. 

I hope you liked the article. In case of any doubt, you can ask in the comments below. Also, share this articles so that more can take advantage of the code.

Enjoy Coding!!!