{

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


In this tutorial, learn to style anchor tags 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 to 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 link navigate on the same page with sections link.

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

It outputs a label styled with a default under link and acts as a link.

or anchor tag can be styled using the following selectors. href attribute is important to have link url value.

  • 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 style attribute overrides CSS selector

Here is an example for adding inline styles for changing color,font family and bold.

<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 id=link1

<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 #id selector in css selector

#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 anchor tag.

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

The below styles explains 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 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 anchor tag element?

Disable anchor tag makes not clickable and the color should be gray We can do it two ways. One way,

  • pointer-events:none which disable mouse hover and allows keyboard hover
  • cursor: not-allowed allows to disable 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;
}

`` Link4


## How to style anchor link  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 to none.
Here are CSS styles link button

```css
#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. img tag is wrapped in 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 if you want to add an image as a background to an anchor link.

You need to add 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 underline from 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 an 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 tag or CSS parent selectors like as below.

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

.links a{
    color:green
}

The below selectors selects all anchor elements

a {
    font-weight:700;
}

Codepen example

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.