1

Pessoal queria saber como poderia fazer com que meu button não ficasse roxo por causa do hiperlink.

inserir a descrição da imagem aqui

Eu queria deixar nessa aparência o button mais ou menos.

inserir a descrição da imagem aqui

Código:

<button class="button">
    @Html.ActionLink("Nova Visita", "Form")
</button>

CSS:

    .button {
    background-color: #294a73;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
2
  • Retire o background-color: #294a73; e esse padding acredito que tá muita coisa... 2/08/2018 às 14:35
  • Cara editei meinha resposta e coloquei uns comentários no código para vc entender melhor, qq dúvida comenta lá que tento te ajudar.
    – hugocsl
    2/08/2018 às 15:19

2 Respostas 2

1

Essa cor roxa é devido ao link estar com status de :visited, pois ele já foi acessado por vc. Inclusive essa cor pode variar de browser para browser, se não me engano no Opera por exemplo o link visitado é vermelho e não roxo. Vc pode ler mais sobre isso nessa documentação da Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

Agora para corrigir a cor basta adicionar no css algum estilo para sobrescrever a cor default do user-agent do browser.

No exemplo abaixo com a classe *:visited tudo que for visitado fica com a cor verde. Deixei o comentário no código para vc entender melhor

*:visited {
  color: #f00; /* cor que vc quiser para substituir a cor roxa do link visitado */
}
.button {
  background-color: #313859;
  border: none;
  color: white; /* cor padrão do link que vc definiu antes do usuário visitar */
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: sans-serif;
  font-weight: bold;
}
    <button class="button">
        @Html.ActionLink("Nova Visita", "Form")
    </button>

    <a class="button" href="https://www.google.com.br/">Exemplo Visitado</a>

0

Acontece que dentro do button, o Html.ActionLink é renderizado com uma tag de link <a>, então você precisa estilizar essa tag.

Veja abaixo um exemplo:

.button {
    background-color: #294a73;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button a:link {
   color:#FFFFFF;
   text-decoration:none;
}
.button a:visited {
   color:#FFFFFF;
   text-decoration:none;
}
.button a:hover {
   color:cyan;
   text-decoration:underline;
}
.button a:active {
   color:#FFFFFF;
   text-decoration:underline;
   background-color:#000000;
}
<button class="button">
    <a href="#">Nova Visita</a>
</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .