Como mostrar um oculto html a tag <p> elemento usando JavaScript?

Você pode usar removeAttribute

document.getElementById("button").removeAttribute('hidden')

<p hidden id="button">
  <a id="dashboard-btn" 
     href="www.google.com" 
     target="_blank" 
     rel="noopener noreferrer">
      www.google.com
    </a>
</p>

Você ocultar o seu elemento com o atributo hidden então, você precisa controlar esse atributo, em vez de estilo, como:

document.getElementById("button").hidden = false; 

<p hidden id="button">
    <a id="dashboard-btn" href="www.google.com" target="_blank" rel="noopener noreferrer">
      www.google.com
    </a>
</p>

Referência:

• escondido

Tente com esse

document.getElementById("button").removeAttribute("hidden")

Você pode remover o atributo "oculto".

document.getElementById("button").removeAttribute("hidden")

Eu tenho várias soluções:

Um

document.getElementById("button").hidden = "false";

Como oculto não é uma css visibility : hidden; propriedade.

É um atributo.

B

Como o @tacoshi mencionado,

.hidden {
  opacity: 0;
  transition: opaicty 1s ease;
  /* use opacity in case you want to have a beautiful transition */
}

E apenas utilizar

document.getElementById("button").classList.toggle("hidden")