Best 10 Frequent used styles for anchor links examples

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 uses to link from one page to another page or navigate to different Linked sections on the same page.

For example, Create an anchor link using a tag with a href attribute

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

It outputs a label with a default underline style and acts as a link. The href attribute is important to have a link url value.

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 declares with the id attribute.

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

How do you apply color to blue, change font family and font weight to bold

used the #id selector to select a DOM element with into style an element.

#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?

The Disable anchor tag makes it not clickable and the color should be gray We can do it two ways. 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>

How to style anchor link the same as the button

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;
}

How to remove blue under the link for the anchor tag

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

asdfasdfasdfasdfasd

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