Why is my UI button not attaching a function?

Question

I'm trying to achieve a UI like this in my Unity project, where I can use my custom function in a C# script:

However, instead of the desired UI, I'm getting this on my button:

code (player file c#) :

using UnityEngine;
using UnityEngine.UI;

public class GameManager : MonoBehaviour
{
    public player player;
    public Text scoreText;
    public GameObject playbutton;
    public GameObject gameoverText;
    private int score;

    void Awake()
    {
        Application.targetFrameRate = 60;
        Pause();
    }
    void Play()
    {
        Debug.Log("Play");
        score = 0;
        scoreText.text = score.ToString();
        Time.timeScale = 1f;
        player.enabled = true;
        playbutton.SetActive(false);
        gameoverText.SetActive(false);

        Pipes[] pipes = FindObjectsOfType<Pipes>();
        foreach (Pipes pipe in pipes)
        {
            Destroy(pipe.gameObject);
        }
    }
    void Pause()
    {
        Time.timeScale = 0f;
        player.enabled = false;

    }
    public void IncreaseScore()
    {
        score++;
        scoreText.text = score.ToString();
    }

    public void Gameover()
    {
        gameoverText.SetActive(true);
        playbutton.SetActive(true);
        Pause();

    }

}

I followed this tutorial on YouTube: https://www.youtube.com/watch?v=ihvBiJ1oC9U&list=LL&index=2

How can I achieve the first UI style so I can properly attach and use my function in the button?

I'm looking for a solution to display the button with the normal UI appearance, allowing me to integrate it with my C# script.

Answer 1

Your inspector is in Debug mode (right image), set it back to Normal mode (left image) by clicking the [⋮] button in the top right of the inspector tab, and then click "Normal"

Image from Unity - Manual: Working in the Inspector