in a html how to add different type of hyperlink using internal CSS have added many hyperlink's

Avisekh Mishra 0
Viewed 22

so, in an html I have added many hyperlinks 1.the first one I want it to be a normal one 2.the second one I want it to change into a different colour when a mouse howers over it. 3.the third one I want it to be a button style hyperlink.

html
2 Answers

You can use classes to style hyperlinks. Always use pseudo classes to style hyperlinks. Remember LVHA (Link, Visited, Hover, Active).

a:link - a normal, unvisited link.

a:visited - a link the user has visited.

a:hover - a link when the user mouses over it.

a:active - a link the moment it is clicked.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

.link {
    display: inline-block;
    cursor: pointer;
 }

.links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.link1 {
    text-decoration: underline;
}

.link2:hover {
    color: red;
}

.link3 {

    background: yellow;
    border-radius: 20px;
    padding: 10px;
}


.link3:hover {

    background: red;
    
}
<div class="links">
    <a class="link link1">Hyperlink1</a>
    <a class="link link2">Hyperlink2</a>
    <a class="link link3">Hyperlink3</a>
</div>

void__0

  • CSS has .class:hover syntax to make the color change when the mouse hover.

    <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <style>
    /* first hyperlink: normal one  */
    .firstHyperLink {
    }

    /* second one change color when mouse hover  */
    .secondHyperLink:hover {
      color: cornflowerblue;
    }

    /* third one: button style  */
    .thirdHyperLink {
      background-color: cornflowerblue;
      padding: 12px;
    }
  </style>
</head>
<body>
  <a class="firstHyperLink" href="">First Hyperlink</a>
  <a class="secondHyperLink" href="">Second Hyperlink</a>
  <a class="thirdHyperLink" href="">Third Hyperlink</a>
</body>
tcvduc0
Related