CODEWITHSUNDEEP
cssbuttonhyperlink
TMOTTM
TMOTTM

Reputation: 3391

Why in CSS styles of button and links are equal but type is rendering differently?

In my page, I styled buttons and links. Using inspector, I find properties to be equal, the button is visually very similar to the link. Font weight is 200 for both . However, the text for the button is slightly lighter. Is this expected behaviour? 

body {
  font-family: "Helvetica";
}

button {
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
}

a {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
}
<a href="#">Anchor</a><br />
<button>Anchor</button>

Upvotes: 0

Views: 59

Answers (2)

TuJ
TuJ

Reputation: 16

Here is a link to it looking identical https://jsfiddle.net/cwnv5m63/

<a href="#">Anchor</a><br />
<button>Anchor</button>

body {
  font-family: "Helvetica";
}
a {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding-right: 0;
                color: black;
}

button {
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
                padding: 0;
                margin: 0;
}

The reason it didn't before is that a button has native styling so it automatically has padding added to it so I have overwritten this in the styles.

Upvotes: 0

Michael
Michael

Reputation: 308

The font-family of the button gets overridden by the user agent. You have to specify the font-family for the button explicitly. I also consolidated some styles, since you're repeating the same CSS statements. Here is my solution:

a, button {
        text-decoration: none;
        border: none;
        background-color: white;
        font-size: 1.5rem;
        color: "red";
        font-weight: 200;
        padding: 0;
        font-family: "Helvetica";
}
<a href="#">Anchor</a><br />
<button>Anchor</button>

Upvotes: 2

Related Questions