How to disable a href link in CSS?

To disable a href link in CSS, we can use various approaches keeping the link visible but preventing user interaction. We will be understanding three different approaches to disable a href link in CSS.

In this article, we are having a link as 'Click Here', our task is to disable href link in CSS.

Approaches to Disable a href Link in CSS

Here is a list of approaches to disable a href link in CSS which we will be discussing in this article with stepwise explaination and complete example codes.

To disable a href link in CSS, we have used CSS pointer-events property. It control how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements.

  • We have created a link using HTML anchor tag.
  • Then we have used a as element type selector which changes the link color to green and disbales the link using "pointer-events: none;". We have also set the text-decoration value to none to remove the underlining of link.

Example

Here is a complete example code implementing above mentioned steps to disable a href link in CSS using pointer-events property.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        a {
            pointer-events: none;
            text-decoration: none;
            color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>
        Disabling a href link in CSS
    </h3>
    <p>
        In this example, we have used CSS 
        <strong>pointer-events</strong> property
        to disable href link in CSS.
    </p>
    <a href="/css/index.htm">Click Here</a>
</body>
</html>

In this approach to disable a href link in CSS, we have used CSS z-index property which define order of positioned element. Element with higher order is in front than element with lesser order.

  • We have used a as an element type selector which selects the anchor tag.
  • Then, we have used "z-index: -1;" along with "position: relative;" to disbale the link.

Example

Here is a complete example code implementing above mentioned steps to disable a href link in CSS using z-index property.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        a {
            z-index: -1;
            text-decoration: none;
            color: #04af2f;
            position: relative;
        }
    </style>
</head>
<body>
    <h3>
        Disabling a href link in CSS
    </h3>
    <p>
        In this example, we have used CSS 
        <strong>z-index</strong> property
        to disable href link in CSS.
    </p>
    <a href="/css/index.htm">Click Here</a>
</body>
</html>

In this approach we have used div element to overlay a transparent layer on link to disable the link.

  • We have used an anchor tag to create a link and a div tag which we will be using to overlay a transparent layer.
  • Then we have used overlay class which creates an invisible layer on anchor element. CSS height and width property ensures overlay covers whole element and is positioned relative to link.
  • The background-color is set to transparent so that link is visible to user and is placed at top left corner using CSS top and left property.

Example

Here is a complete example code implementing above mentioned steps to disable a href link in CSS by overlaying transparent layer.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        a {
            color: #04af2f;
            text-decoration: none;
        }
        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: transparent;
        }
    </style>
</head>
<body>
    <h3>
        Disabling a href link in CSS
    </h3>
    <p>
        In this example, we have used HTML 
        <strong>div</strong> to create a 
        transparent layer to disable href link 
        in CSS.
    </p>
    <a href="/css/index.htm">Click Here</a>
    <div class="overlay"></div>
    </body>
</html>

Conclusion

In this article, to disable a href link in CSS we have used three different approaches which are: by using pointer-events property, by z-index property and overlaying an invisible layer. Out of all three pointer-events property is most commonly used approach to disable a href link.

Updated on: 2024-09-18T09:28:45+05:30

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements