Disable Links With CSS

In this paper we will only experiment with css by disabling a link, there are cases where sometimes in a condition we have to disable/disable a link, for example in an administrator page, when the admin is logged in people can edit an article (active link), but when the login is an operator, the link for editing should be deactivated, but not removed so that the difference can be seen.

disable-link-css

Usually we use javascript to turn off the link (but if the browser’s javascript is disabled then this is useless) or conditioned in the program code so that the link is not printed. But that way the link still looks active and can be clicked.

This time we will try to make links not clickable, even if javascript is turned off.

We only need a class and then it is set in css so that the link cannot be clicked, or seems to be inactive.

Create the HTML structure as follows.

It can be seen on the 2nd link that goes to flickr given the class .disabled

styling
And for the css as follows

  • {
    margins: 0;
    padding: 0;
    }

body {
padding: 3em 2em;
font-size: 1em;
line-height: 1;
}
a {
text-decoration: none;
}
body {
text-align: center;
}
h1, p {
margin:20px 0;
}
.knob {
display: inline-block;
padding: 10px 12px;
color: #fff;
text-decoration: none;
background: #3B5998;
border-radius: 3px;
}

.button:hover {
background:orange;
}

.disabled {
pointer-events: none;
opacity:0.5;
}
Noteworthy there is the class .disabled where there is pointer-events:none which will disable the link, and opacity:0.5 which will make the button appear blurry and inactive.