link states don't work in my code

Question

My code shows a weird behaviour. I do not know why as soon as I add states to the .btn class, all the CSS features of the buttons are completely ignored by the web browser. Therefore, the buttons are shown in a way that there are no CSS for them. However, if I get rid of states, the css applies to the button and they are rendered nicely by the browser.

You can find my code bellow. I really appreciate if someone can help to spot why adding states to the button is problematic.

/* links in general have 4 states
     hover, visited, link(normal mode) and active
 */

.btn:link,
.btn:visited {
  /* We use inline-block to be
     able to use hight and width
     for that*/
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;/* Removing the line under a word */
  text-decoration: none;
  border-radius: 200px;
}

.btn-full:link,
.btn-full:visited {
  background-color: #e67e22;
  border: 1px solid #e67e22;
  color: #fff;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: 1px solid #e67e22;
  color: #e67e22;
}

.btn:hover,
.btn:active {
  background-color: #bf6516;
  border: 1px solid #bf6516;
}

<a class="btn"> This link is not working </a>

is it a `button` or a link `a`? if its a button then it's logical since there is no `:link` for it — Temani Afif, Jun 30 '18 at 09:48

Temani Afif · Accepted Answer · 2018-06-30T10:15:30.803

An a tag with a :link state is not exactly the same as without :link state. This state applies to a with a href defined

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a>, <area>, or <link> element that has an href attribute.^ref

/* links in general have 4 states
    hover, visited, link(normal mode) and active
*/
.btn:link,
.btn:visited{
    /* We use inline-block to be
       able to use hight and width
       for that*/
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    background:pink;
}
.btn:hover,
.btn:active {
    background-color: #bf6516;
    border: 1px solid #bf6516;
}

<a href="#" class="btn">A link with href</a>
<a class="btn">A link without href</a>

So to be sure it will always work better add the style without any states:

/* links in general have 4 states
    hover, visited, link(normal mode) and active
*/
.btn,
.btn:link,
.btn:visited{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    background:pink;
}
.btn:hover,
.btn:active {
    background-color: #bf6516;
    border: 1px solid #bf6516;
}

<a href="#" class="btn">A link with href</a>
<a class="btn">A link without href</a>

link states don't work in my code

1 Answers1