How to disable a link using only CSS? Last Updated : 05 May, 2025 Comments Improve Suggest changes Like Article Like Report To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this approach:Pointer-Events Property Values:ValueDescriptionnoneDisables all pointer events (clicks, hovers, etc.).autoDefault value; the element behaves normally and responds to pointer events.inheritInherits the pointer-events property from its parent element.initialSets the property to its default value (auto).Disable a link using CSS ExamplesExample 1: Demonstrating the Use of Pointer-Events to Disable an 'a' TagBelow code shows the use of property-events where 'a' tag is disabled, with no cursor (disabled cursor pointer on 'a' tag) html <!DOCTYPE html> <html> <head> <title>Disable Link using CSS</title> <style type="text/css"> .not-active { pointer-events: none; cursor: default; } </style> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>A Computer Science Portal for Geeks</h3> <b>Disabled link:</b> To visit us <a href="www.geeksforgeeks.org" class="not-active"> Click Here </a> <br> <br> <b> Enabled link: </b> To use our community site <a href= "https://www.geeksforgeeks.org/community/"> Click Here</a> </center> </body> </html> Temporary Note on Output : On Run, The output may show a "Refuse to Connect" error due to security restrictions from the GeeksforGeeks site, which prevents embedding. To see the output, replace the src URL with one that allows iframe embedding, such as "https://www.example.com".Example 2: Disabling an 'a' Tag Using Color and Text-Decoration PropertiesThis code shows CSS which applies to an 'a' tag so that it looks like, that the link is disabled, to do so, color and text-decoration properties can be used. html <!DOCTYPE html> <html> <head> <title>Disable Link using CSS</title> <style type="text/css"> .not-active { pointer-events: none; cursor: default; text-decoration: none; color: black; } </style> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h3>A Computer Science Portal for Geeks</h3> <b>Disabled link:</b> To visit us <a href="www.geeksforgeeks.org" class="not-active"> Click Here </a> <br> <br> <b> Enabled link: </b> To use our community site <a href= "https://www.geeksforgeeks.org/community/"> Click Here </a> </center> </body> </html> Temporary Note on Output : On Run, The output may show a "Refuse to Connect" error due to security restrictions from the GeeksforGeeks site, which prevents embedding. To see the output, replace the src URL with one that allows iframe embedding, such as "https://www.example.com". Comment More infoAdvertise with us B bilal-hungund Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2018 CSS-Misc +1 More Similar Reads Making a div Vertically Scrollable using CSS The overflow property in CSS controls how content that goes beyond an element's boundaries is handled. It can either hide the extra content or add scrollbars so users can scroll to see more without leaving the current view. This helps display large amounts of content, such as text, images, or tables 3 min read How to give a div tag 100% height of the browser window using CSS CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div 3 min read Wildcard Selectors (*, ^ and $) in CSS for classes Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing "class" anywhere, .class^ selec 3 min read How to style a dropdown using CSS? We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal.What is a <select 3 min read Remove border from IFrame using CSS The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0".Syntax:<iframe frameBorder="value"></iframe>Note:The frameBorder attribute is 2 min read How to Hide Scrollbar with CSS Hiding the scrollbar with CSS can enhance the look of your webpage by removing visible scrollbars while still allowing users to scroll through content. This can create a cleaner, more streamlined user interface without sacrificing usability. In this article, we’ll explore different methods for hidin 3 min read How to apply !important in CSS? The !important rule in CSS is used to add more importance to a property/value than normal. It forces a style to override any other declarations, ensuring the specified property value is applied, regardless of specificity. It helps resolve conflicts but should be used sparingly to avoid complicating 2 min read How to use a not:first-child Selector in CSS? The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout.Syntax:not( element ) { // CSS property } Example: In this 2 min read How to Auto-Resize an Image to Fit a Div Container? To resize an image or video to fit inside a div container, use the object-fit property for precise control over how the content fits.object-fit maintains the aspect ratio or stretches the content to fill the container.Common values include cover (fills the container, may crop) and contain (fits with 3 min read How to Disable Resizable Property of Textarea using CSS? The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none.Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user.Disable Resizing of TextareaThe resize property in CSS controls an el 1 min read Like