An example which shows the difference between disabled and active links

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a.button,
      button {
        display: inline-block;
        padding: 20px 55px;
        margin: 20px 10px;
        line-height: 18px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background-color: #8ebf42;
        text-decoration: none;
        color: #ffffff;
      }
      a[disabled].button,
      button[disabled] {
        cursor: not-allowed;
        opacity: 0.4;
        pointer-events: none;
        -webkit-touch-callout: none;
      }
      a.button:active:not([disabled]),
      button:active:not([disabled]) {
        background-color: #cccccc;
        color: #2a2a2a;
        outline: 0;
      }
    </style>
  </head>
  <body>
    <h2>Disable link on current page</h2>
    <a href="https://www.w3docs.com/" disabled="disabled" class="button">Disabled</a>
    <a href="https://www.w3docs.com/" class="button">Click here</a>
  </body>
</html>