How to Disable Link With CSS

by

In this tutorial, we are going to see an example of how to disable links with css. If you want to show not clickable link, then you can easily do that using css. I have created an anchor tag with a class attribute, then write css for class to disable link. I have written two css script to inactive a link. Let’s us see how to disable link.

How to Disable Links With CSS

HTML

<b>Active Anchor :</b> 
<a href="http://www.phpcluster.com/" class="btn">PHPCluster</a>  <br><br>

<b>Inactive Anchor :</b> 
 <a href="http://www.phpcluster.com/" class="btn disabled">PHPCluster</a>

CSS

.btn
{
display:block;
width:100px;
height:25px;
background:red;
color:#fff;
padding:13px;
border-radius:5px;
text-align:center;
text-decoration:none;
}

/* to disable link */
.disabled
{

pointer-events: none; 
opacity:0.6; 

/* alternate css*/
/*
cursor : not-allowed;
cursor: default;
opacity: 0.6;
*/
}

Leave a Comment