Best 10 Frequent used styles for anchor links examples | a tag CSS styles

Best 10 Frequent used styles for anchor links examples | a tag CSS styles

In this tutorial, Learn Multiple examples of anchor tag styles in HTML CSS.

  • How to add typography styles to anchor?
  • Add cursor hand on mouse hover
  • how to add hover color to the anchor tag?
  • how to disable styles for the anchor tag?
  • How to link a button?
  • how do you set focus styles for the anchor tag?
  • How to add an image to the anchor tag?

An anchor tag in HTML is used to link from one page to another or to navigate to different sections within the same page.

For instance, to create an anchor link using the <a> tag with an href attribute, you can use the following code:

<a href="https://cloudhadoop.com">Visit cloudhadoop.com!</a>

This code will produce a label with a default underline style, functioning as a hyperlink. The href attribute is crucial as it specifies the URL to which the link leads.

The <a> or anchor tag can be styled using the following selectors.

  • element selector
  • id selector
  • class selector

In this tutorial, We are using the id selector, you can use any selector, but styles are important to apply to the anchor tag.

Styles can be applied using below two approaches.

  • using CSS global selector
  • inline styles defined with the style attribute

remember inline styles defined with the style attribute overrides CSS selector.

Here is an example of adding inline styles for changing color, font family, andfont-weight`.

<a
  href="cloudhadoop.com"
  style="font-family:Monospace;font-size:30px;
  color:blue;font-weight:600;"
  >Visit cloudhadoop.com!</a
>

How to Change Color and Font Family for Anchor Tag with CSS?

The anchor tag is declared with the id attribute.

<a href="cloudhadoop.com" id="link1">Visit cloudhadoop.com!</a>

To apply a blue color, change the font family, and set the font weight to bold, use the #id selector to target the element and style it accordingly.

#link1{
  font-family:Monospace
  font-size:30px;
  color:blue;
  font-weight:600;
}

How to change color and styles on mouse hover in anchor tag?

Let’s declare the anchor tag.

<a href="cloudhadoop.com" id="link3">Link3</a>

The below styles explain the following things.

  • Default anchor color is blue
  • Change color to red on anchor hover
#link3 {
  color: green;
}
#link3:hover {
  color: red;
}

How to add hand cursor on hovering anchor tag

anchor tag can be a style to change the cursor pointer during mouse or keyboard hover.

CSS cursor property with pointer value used to change on :hover selector

#link2 {
  cursor: pointer;
}

how to disable the anchor tag element?

Disabling the anchor tag makes it unclickable, and the color should appear as gray. There are two ways to achieve this:

One way,

  • pointer-events:none which disables mouse hover and allows keyboard hover `cursor: not-allowed allows disabling keyboard hover events
pointer-events: none;
cursor: not-allowed;

Another way is using color should be light gray and cursor to not-allowed

.disable {
  color: #9999;
  cursor: not-allowed;
  text-decoration: underline;
}

<a href="cloudhadoop.com" id="link4" class="disable">Link4</a>

Sometimes, you want to use an anchor link but need to look like a button.

It is possible with CSS width and height attributes and makes text-decoration none. Here are the CSS styles link button.

#link5 {
  display: block;
  width: 100px;
  height: 20px;
  background: #4285f4 !important;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
}

Html anchor link

<a href="cloudhadoop.com" id="link5">Link5</a>

How to add an image to the anchor tag

HTML images are displayed using an img tag. The img tag is wrapped in the anchor tag as follows.

<a href="https://www.cloudhadoop.com">
  <img
    src="https://www.cloudhadoop.com/assets/img/logo-1.png.png"
    width="30"
    height="30"
  />
</a>

Suppose you want to add an image as a background to an anchor link.

You need to add a display:block with width and height using background-image with url value.

#link6 {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("https://www.cloudhadoop.com/assets/img/logo-1.png.png");
}

how to set focus styles for an anchor tag

You can use focus active and hover, pseudo-selectors,

#link7:focus {
  color: pink;
}
#link7:active,
#link7:hover {
  color: pink;
}

text-decoration:none removes the underline from the anchor link Here is an example

<a href="abc.com" id="link8">Link8</a>

#link8 {
  text-decoration: none !important;
}

anchor tag inside div or span tag

anchor links declare inside any HTML or custom tags

This is a valid declaration

<div class="links">
  <a href="#">link</a>
</div>

or
<span class="links">
  <a href="#">link</a>
</span>

And the link styles can be applied with anchor tags or CSS parent selectors like as below.

The below selectors select all anchor child elements under class=links

.links a {
  color: green;
}

The below selectors select all anchor elements.

a {
  font-weight: 700;
}

How do I style an anchor in CSS?

anchor tag applied styles in three ways

  • inline styles using the style attribute
  • CSS selectors

Codepen anchor tag styles example

This example is the code for creating a custom class for the navigation bar

See the Pen