Disable link using css


  • Is there any way to disable a link using CSS?
  • If you have a class called current-page (css webpage) and want links with this class to be disabled so that no action occurs when the used click the html link

Solution 1:

  • using css - It can only be used to change the style. The best way you could probably do with CSS is to hide the link altogether.
  • What you really need is some javascript. Here's how can you do the javascript function and what you want using the jQuery library.

jQuery code :

$('a.current-page').click(function() { return false; });

Solutions 2:

  • css coding can't do that because it is only for presentation. Your options are:
    • Don't include the href attribute in your <a> tags.
    • Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly. jQuery would help you with that problem.

Solution 3:

  • In Bootstrap, this is the solution for Bootstrap Disabled Link and Bootstrap Disabled Button.

Bootstrap Disabled Link

html code :

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button but it looks like link

html code :

<button type="button" class="btn btn-link">Link</button>

Related Searches to Disable link using css