I finished the button, and moved the ball to the center of the second window.

Similar to the text box, I needed to create two rectangles: one for the text and another for the button itself. The button should change color when hovered over and return to the default colors when the left mouse button is pressed while the cursor is over the button.

void GenerateButton(TTF_Font *font, SDL_Renderer *renderer, struct StartButton *startButton, bool isHovering)
{    
    SDL_Color color;

    if (isHovering) 
    {
        color.r = 0x00;
        color.g = 0x00;
        color.b = 0x00;
        color.a = 0xFF;
    }else
    {
        color.r = 0xFF;
        color.g = 0xFF;
        color.b = 0xFF;
        color.a = 0xFF;
    }

    SDL_Surface *buttonTextSurface = TTF_RenderText_Solid(font, "Start", color);

    if (startButton->width == 0 || startButton->height == 0)
    {
        startButton->width = buttonTextSurface->w;
        startButton->height = buttonTextSurface->h; 
    }

    SDL_SetRenderDrawColor(renderer, 0xFF, 0xFF, 0xFF, 0xFF);
    SDL_FRect buttonBorderRect = {startButton->x, startButton->y, 
                                                                startButton->width * 1.3, startButton->height * 1.3};

    if (isHovering)
    {
        SDL_RenderFillRect(renderer, &buttonBorderRect);
    }else
    {
        SDL_RenderRect(renderer, &buttonBorderRect);
    }

    SDL_Texture *buttonTextTexture = SDL_CreateTextureFromSurface(renderer, buttonTextSurface);
    const SDL_FRect buttonTextHolder = {startButton->x * 1.04, startButton->y * 1.01, 
                                                                            startButton->width, startButton->height};

    SDL_RenderTexture(renderer, buttonTextTexture, NULL, &buttonTextHolder);

    SDL_RenderRect(renderer, &buttonBorderRect);

    SDL_DestroySurface(buttonTextSurface);
    buttonTextSurface = NULL;
    SDL_DestroyTexture(buttonTextTexture);
}

I created a new bool function to check if the mouse cursor is within the button's boundaries.

bool IsHoveringStartButton(int mouseX, int mouseY, struct StartButton startButton)
{
    if (mouseX >= startButton.x&& mouseX <= startButton.x + startButton.width * 1.3)
    {
        if (mouseY >= startButton.y && mouseY <= startButton.y + startButton.height * 1.3)
        {
            return true;
        }
    }

    return false;
}

After setting, the button's position,

startButton.x = windowWidth * 0.22;
startButton.y = windowHeight * 0.3;
startButton.height = 0;
startButton.width = 0;

I used a combination of the IsHoveringStartButton function and the mouseState variable in a if-else statement to control how the button reacts when the use interacts with it.

if ((mouseState &SDL_BUTTON_LMASK) != 0 && IsHoveringStartButton(mouseX, mouseY, startButton))
{
    GenerateButton(appFont, appRenderer, &startButton, false);
}
else
{
    GenerateButton(appFont, appRenderer, &startButton, IsHoveringStartButton(mouseX, mouseY, startButton));
}

Demonstration