How to make link field more like a button field

With dynamicLink you can use images as links por example

docs.appian.com/.../Dynamic_Link_Component.html

Any reason for not using a Site object and make these links the pages?

Card layouts also support links.

There are multiple ways you can achieve this type of landing page. I would recommend using a billboard layout with overlay.
See the example UI for your reference - you can modify it as per your needs, as multiple modifications are possible.

{
  a!billboardLayout(
    backgroundMedia: a!documentImage(document: a!EXAMPLE_BILLBOARD_IMAGE()),
    backgroundMediaPositionHorizontal: "CENTER",
    backgroundMediaPositionVertical: "MIDDLE",
    backgroundColor: "#000000",
    overlay: a!barOverlay(
      contents: {
        {
          a!localVariables(
            local!options: {
              a!map(icon: "home", name: "Admin"),
              a!map(icon: "building", name: "Recruiter"),
              a!map(icon: "building", name: "Vendor"),
              a!map(icon: "building", name: "Panel"),
              a!map(icon: "building", name: "Candidate")
            },
            a!columnsLayout(
              columns: {
                a!columnLayout(),
                a!forEach(
                  items: local!options,
                  expression: a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {
                          a!richTextDisplayField(
                            labelPosition: "COLLAPSED",
                            value: {
                              a!richTextIcon(
                                icon: fv!item.icon,
                                color: "#8CA1D0",
                                size: "SMALL"
                              ),
                              char(10),
                              a!richTextItem(
                                text: fv!item.name,
                                color: "ACCENT",
                                size: "SMALL",
                                style: "STRONG"
                              ),
                              
                            },
                            align: "CENTER"
                          )
                        },
                        link: a!dynamicLink(
                          saveInto: a!save(local!selectedCard, fv!item.name)
                        ),
                        height: "EXTRA_SHORT",
                        shape: "ROUNDED",
                        style: "INFO"
                      )
                    },
                    width: "MEDIUM"
                  )
                ),
                a!columnLayout()
              },
              marginBelow: "STANDARD"
            ),
            
          )
        }
      },
      style: "SEMI_DARK",
      
    ),
    
  )
}