How to create button with transparent background and shadow in pygame?

Question

Hi guys I need your help. I want to set opacity of the rectangles which are created by help of class button

this is before class

screen = pygame.display.set_mode((screen_width, screen_height))
pygame.display.set_caption('Snake')

bg_img = pygame.image.load('Graphics/bg.png')
bg_img = pygame.transform.scale(bg_img,(screen_width,screen_height))


    class button():
    def __init__(self,text,width,height,pos,elevation,image,color,shadow,hover):
        self.image = pygame.transform.scale(image, (int(width), int(height)))
        self.rect = self.image.get_rect()
        self.elevation = elevation
        self.dynamic_elecation = elevation
        self.original_y_pos = pos[1]
        self.color = color
        self.color_shadow = shadow
        self.hover = hover



        self.clicked = False

        self.top_rect = pygame.Rect(pos,(width,height))
        self.top_color = color

        self.bottom_rect = pygame.Rect(pos,(width,height))
        self.bottom_color = shadow
        
        font = pygame.font.SysFont('rockwell', 50)
        self.text_surf = font.render(text,True,'#FFFFFF')
        self.text_rect = self.text_surf.get_rect(center = self.top_rect.center)

    

here is function for drawing and also detecting if it was clicked

 def draw_button(self):
        action = False

        pos = pygame.mouse.get_pos()

        self.top_rect.y = self.original_y_pos - self.dynamic_elecation
        self.text_rect.center = self.top_rect.center 

        self.bottom_rect.midtop = self.top_rect.midtop
        self.bottom_rect.height = self.top_rect.height + self.dynamic_elecation

        pygame.draw.rect(screen,self.bottom_color, self.bottom_rect, border_radius = 12)
        pygame.draw.rect(screen,self.top_color, self.top_rect, border_radius = 12)
        screen.blit(self.text_surf, self.text_rect)

        if self.top_rect.collidepoint(pos):
            self.top_color = self.color
            if pygame.mouse.get_pressed()[0]:
                self.dynamic_elecation = 0
                self.clicked = True

            elif pygame.mouse.get_pressed()[0] == 0 and self.clicked == True:
                self.clicked = False
                action = True
            else:
                self.dynamic_elecation = self.elevation
                self.top_color = self.hover
        else:
            # self.dynamic_elecation = self.elevation
            self.top_color = self.color

        screen.blit(self.image, (self.top_rect))
        return action

Here I am creating that button

button_snake = '#191919'
    hover_snake = '#999999'
    shadow_snake = '#191919'
    black = button('',600,180,(100,30),0, menu_img, '#191919', '#191919', '#191919')
    red_snake = pygame.image.load('Graphics/snake_r.png').convert_alpha()

In conclusion I want to have another value in class button (self,text,...) and there would be opacity

example

Answer 1

See How to separately change the opacity of a text on a button pygame? and Draw a transparent rectangles and polygons in pygame. You have to draw the rectangle on a transparent pygame.Surface and blit the Surface on the screen. A transparent pygame.Surface can be crate with the pygame.SRCALPHA flag:

top_surf = pygame.Surface(self.top_rect.size, pygame.SRCALPHA)
pygame.draw.rect(top_surf, self.top_color, (0, 0, *self.top_rect.size), border_radius = 12)
screen.blit(top_surf, self.top_rect.topleft)

---

Coplete example:

import pygame

class Button():
    def __init__(self, text, width, height, pos, elevation, image, color, shadow, hover):
        #self.image = pygame.transform.scale(image, (int(width), int(height)))
        #self.rect = self.image.get_rect()
        self.elevation = elevation
        self.original_y_pos = pos[1]
        self.color = color
        self.color_shadow = shadow
        self.hover = hover
        self.clicked = False
        self.top_rect = pygame.Rect(pos,(width,height))
        self.top_color = color
        self.bottom_rect = pygame.Rect(pos,(width,height))
        self.bottom_color = shadow
        font = pygame.font.SysFont('rockwell', 50)
        self.text_surf = font.render(text,True,'#FFFFFF')
        self.text_rect = self.text_surf.get_rect(center = self.top_rect.center)

    def draw_button(self, screen):
        action = False
        pos = pygame.mouse.get_pos()
        top_rect = self.top_rect.copy()
        bottom_rect = self.bottom_rect.copy()
        bottom_rect.x += 20
        bottom_rect.y += 20
        if top_rect.collidepoint(pos):
            self.top_color = self.color
            if pygame.mouse.get_pressed()[0]:
                self.clicked = True
                bottom_rect.inflate_ip(self.elevation, self.elevation)
                top_rect.inflate_ip(self.elevation, self.elevation)

            elif pygame.mouse.get_pressed()[0] == 0 and self.clicked == True:
                self.clicked = False
                action = True
            self.top_color = self.hover
        else:
            self.top_color = self.color

        bottom_surf = pygame.Surface(bottom_rect.size, pygame.SRCALPHA)
        pygame.draw.rect(bottom_surf, self.bottom_color, (0, 0, *bottom_rect.size), border_radius = 12)
        screen.blit(bottom_surf, bottom_rect.topleft)

        top_surf = pygame.Surface(top_rect.size, pygame.SRCALPHA)
        pygame.draw.rect(top_surf, self.top_color, (0, 0, *top_rect.size), border_radius = 12)
        screen.blit(top_surf, top_rect.topleft)

        screen.blit(self.text_surf, self.text_rect)
        return action

pygame.init()
screen = pygame.display.set_mode((400, 400))
clock = pygame.time.Clock()

background = pygame.Surface(screen.get_size())
ts, w, h, c1, c2 = 50, *screen.get_size(), (128, 128, 128), (96, 96, 96)
tiles = [((x*ts, y*ts, ts, ts), c1 if (x+y) % 2 == 0 else c2) for x in range((w+ts-1)//ts) for y in range((h+ts-1)//ts)]
for rect, color in tiles:
    pygame.draw.rect(background, color, rect)

font = pygame.font.SysFont(None, 80)
text = font.render("Button", True, (255, 255, 255))

button = Button("Button", 200, 70, (80, 120), 20, None, (128, 128, 255, 128), (64, 64, 128, 128), (255, 128, 255, 128))

run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False          

    screen.blit(background, (0, 0))
    button.draw_button(screen)
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
exit()