Link Colors


ਵੈੱਬ ਪੇਜਾਂ ਵਿਚ ਇਕ ਹਾਈਪਰਲਿੰਕਸ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਟੇਟਸ (States) ਹੁੰਦੀਆਂ ਹਨ।  ਲਿੰਕ ਦੀਆਂ ਕੁਝ ਆਮ ਸਟੇਟਸ ਅਤੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਸ ਵਿਚ ਉਹਨਾਂ ਦੀ ਡਿਫਾਲਟ ਦਿੱਖ ਹੇਠ ਲਿਖੇ ਅਨੁਸਾਰ ਹੁੰਦੀ ਹੈ। 

1) ਅਨਵਿਜ਼ਿਟਡ ਲਿੰਕਸ (Unvisited Links) : ਇਹ ਉਹ ਸਾਰੇ ਲਿੰਕ ਹੁੰਦੇ ਹਨ ਜਿਹਨਾਂ ਉਪਰ ਯੂਜ਼ਰ ਵੱਲੋ ਅਜੇ ਕਲਿੱਕ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੁੰਦਾ। ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਇੱਕ ਅਨਵਿਜ਼ਿਟਡ ਲਿੰਕ ਅੰਡਰਲਾਈਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਨੀਲੇ (blue) ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।  

2) ਵਿਜ਼ਿਟਡ ਲਿੰਕਸ (Visited Links) : ਇਹ ਉਹ ਲਿੰਕ ਹੁੰਦੇ ਹਨ ਜਿਹਨਾਂ ਉੱਪਰ ਯੂਜਰ ਪਹਿਲਾ ਹੀ ਕਲਿੱਕ ਕਰਕੇ ਉਹਨਾਂ ਨੂੰ ਓਪਨ ਕਰ ਚੁਕਿਆ ਹੁੰਦਾ ਹੈ।  ਮੂਲ ਰੂਪ ਵਿੱਚ (by default) ਇੱਕ ਵਿਜ਼ਿਟਡ ਲਿੰਕ ਅੰਡਰਲਾਈਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਜਾਮਨੀ (purple) ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। 

3) ਐਕਟਿਵ ਲਿੰਕਸ (Active Links) : ਇਹ ਲਿੰਕ ਉਹ ਸਟੇਟ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰ ਇੱਕ ਅਨਵਿਜ਼ਿਟਡ ਲਿੰਕ ਉਪਰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ।  ਮੂਲ ਰੂਪ ਵਿੱਚ (by default) ਇੱਕ ਐਕਟਿਵ ਲਿੰਕ ਅੰਡਰਲਾਈਨ  ਹੁੰਦਾ ਹੈ ਅਤੇ ਲਾਲ (red) ਰੰਗ ਵਿਚ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। 

 

Example

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>


Live Demo & Try it yourself! Read More » »

Link Buttons


A link can also be styled as a button, by using CSS:

Example

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>


Live Demo & Try it yourself! Read More » »