CSS How to Disable a Link

learn how to Disable a Link using CSS

Published April 1, 2020

CSS How to Disable a Link
Example Disable a Link Using CSS

CSS How to Disable a Link

We can disable a link using CSS. Just playing with pointer events, text decoration, cursor and color.

We can use to disable a link in navigation which is the current page. Also, we can use to highlight the “current” page if it is available in the navigation.

Example Disable a Link Using CSS

<!DOCTYPE html>
<html>
<head>  
  <meta name="viewport" content="width=device-width">
  <style>
    
    .disable-link {  
      text-decoration: none;
      color: black;
      cursor: default;
      pointer-events: none;
    }
    
  </style>
</head>
<body>
<a href="link.html" class="disable-link">Don't click me.</a>
</body>
</html>