How to Deactivate a Link Using CSS

by Oct 16, 2023Focus On, Tutorials, Wordpress0 comments

Dear DiviManicas, here an easy article about hod to deactivate a link using CSS.

Links are an essential part of web design, allowing users to navigate from one page to another with a simple click. However, there may be situations where you want to deactivate a link, making it unclickable and preventing users from following the link. This can be easily achieved using CSS, specifically the pointer-events property. In this article, we’ll show you how to deactivate a link using the following CSS code:

.class a {
  pointer-events: none;
  cursor: default;
}

What is the Pointer-Events?

The pointer-events property is a CSS feature that controls under what circumstances an element can trigger mouse events. It has various values, but in this case, we set it to “none.” When this property is set to “none,” it effectively makes the element unclickable and non-interactive. This means that when you apply pointer-events: none; to a link, it won’t respond to mouse clicks or any other pointer-related events.

How to Use the CSS Code

To deactivate a link using the provided CSS code, follow these simple steps:

1. HTML Structure

First, make sure you have a link (<a> element) that you want to deactivate. Here’s a sample HTML structure:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="class">
    <a href="https://www.example.com">Deactivated Link</a>
  </div>
</body>
</html>

In this example, the link is inside a div element with the class “class.”

2. Create a CSS File

Create a CSS file (e.g., “styles.css”) and add the following CSS code to it:

.class a {
  pointer-events: none;
  cursor: default;
}

3. Link the CSS File

Link the CSS file to your HTML document by adding the <link> element inside the <head> section, as shown in the HTML structure.

4. Test the Deactivated Link

Open your HTML file in a web browser. You’ll notice that the link now looks like a normal text element, and when you hover over it, the cursor won’t change to the typical hand icon, indicating that it’s not clickable.

When to Deactivate Links

There are various scenarios where you might want to deactivate links using CSS. Some common use cases include:

  1. Styling: If you want to style a link as plain text and remove its default clickable appearance.
  2. User Interaction: Temporarily deactivating links during certain events, like form submissions, to prevent multiple clicks.
  3. Visual Indication: Using deactivated links for elements that should look like links but are not functional.

Remember that while you can deactivate links visually, it’s essential to consider user experience and provide alternative methods for accessing the content or functionality that the link would have provided.

In conclusion, deactivating a link using CSS is a straightforward process. By setting the pointer-events property to “none” and the cursor to “default,” you can make a link non-interactive and prevent users from clicking on it. This can be helpful in various web design scenarios, especially for styling and user interaction purposes.