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.

• Disable href Link using pointer-events
• Disable href Link using z-index
• Disable Link by Overlaying Transparent Element

Disable href Link using pointer-events

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.

    


    

        Disabling a href link in CSS
    
    

        In this example, we have used CSS 
        pointer-events property
        to disable href link in CSS.
    
    Click Here

Disable href Link using z-index

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.

    


    

        Disabling a href link in CSS
    
    

        In this example, we have used CSS 
        z-index property
        to disable href link in CSS.
    
    Click Here

Disable Link by Overlaying Transparent Element

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.

    


    

        Disabling a href link in CSS
    
    

        In this example, we have used HTML 
        div to create a 
        transparent layer to disable href link 
        in CSS.
    
    Click Here
    

    

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.