People wanted to know how I could make my button not go purple because of the hyperlink.
Iwantedtomakethebuttonappearmoreorless.
Code:
<buttonclass="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;
}
This purple color is due to the link being visited: 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 visited link is red and not purple. You can read more about this in this Mozilla documentation link
Now to correct the color just add some style in css to overwrite the default color of the browser's user-agent.
In the example below with class *:visited everything visited will be 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.br/">Exemplo Visitado</a> It happens that within button , Html.ActionLink is rendered with a <a> link tag, so you need to stylize that tag.
See an example below:
.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>