Trying different pseudo-classes for links?

Question

i'm new at coding and I have what I seems a simple problem but I can't fix it.

I have a link with a button format and now all the links in my document are shown like a button.

.button {
    font-size: 12px;
    font-family:  'Montserrat', sans-serif;
    text-align: left;
}
a:link, a:visited {
    background-color: rgb(55, 89, 238);
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
}

<div class="button">
        <a href="emailto:[email protected]">Contact me</a>
    </div>
    <div>
    <p>Now I want to add a normal link but it looks like
<a href="page.php">a button</a></p>
</div>

Edit: I want to know how can I make the other links in my site look normal?

Answer 1

You need to use a css descendant selector that will include the button and the link to target that "button link" only, which will leave all the other links alone. When you use .button and a:link with only a space between, it looks for the two of them together, and thinks they are related like descendants. Here's how to do this:

.button {
    font-size: 12px;
    font-family:  'Montserrat', sans-serif;
    text-align: left;
}
.button a:link, .button a:visited {
    background-color: rgb(55, 89, 238);
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
}

<div class="button">
        <a href="emailto:[email protected]">Contact me</a>
    </div>
    <div>
    <p>Now I want to add a normal link but it looks like
<a href="page.php">a button</a></p>
</div>