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


In this tutorial, Learned how to style anchor tag in html css

  • How to add typhography styles to anchor
  • Add cursor hand on mouse hover
  • how to add hover color to anchor tag
  • how to disable styles for anchor tag
  • How to make link as a button
  • how to set focus styles for anchor tag
  • How to add an image to anchor tag

anchor tag in html used to link from one page to another page or link navigate in the same page with sections link .

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

This outputs an label styled with default underlink and act as a link.

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

  • element selector
  • id selector
  • class selector

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

Styles can be applied using below two approaches

  • using css global selector
  • inline styles defined with 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?

Anchor tag is declared 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 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 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 and 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 button

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

It is possible with CSS width and height attribures and make 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 anchor tag

html images are displayed using 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 image as a background to 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 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 can be declared 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 custom class for 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.