Changing the Button Source

Asked

Viewed 23 times

1

Guys wanted to know how I could make my button not turn purple because of the hyperlink.

inserir a descrição da imagem aqui

I wanted to leave in this appearance the button more or less.

inserir a descrição da imagem aqui

Code:

<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;
}
css razor

  • Remove the background-color: #294a73; and that padding I believe there’s a lot going on...

  • Cara I edited my reply and put some comments in the code for you to better understand, qq doubt there comments that I try to help you.

2 answers

1


This purple color is due to the link being with status of :visited, because it has already been accessed by you. Even this color can vary from browser to browser, if I am not mistaken in Opera for example the link visited is red and not purple. You can read more about this in this Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

Now to fix the color just add in css some style to overwrite the default color of the browser user-agent.

In the example below with the class *:visited everything visited is green. I left the comment in the code for you to understand better

*: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/">Exemplo Visitado</a>

0

It turns out that inside the button, the Html.ActionLink is rendered with a link tag <a>, then you need to style this tag.

See below for an example:

.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>

Browser other questions tagged css razor

You are not signed in. Login or sign up in order to post.