Hyperlink CSS class style

in this tutorial you will learn how to write CSS for hyperlink tag, you can use css style for anchor tag that will look like button.

a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}

We often see different type of hyperlink on web pages, colorful, big, small hyperlink color matching with page design; we can different CSS property of hyperlink or anchor tag.

Hyperlink or Anchor tag is one of the most important elements in HTML document; very often we use this element in different form like in navigation, image, button, in content.

As a web designer we need to make sure the hyperlink looks attractive and maintain same standard throughout the website.

How to write css for hyperlink tag

Common mistake we do, we keep writing different style for hyperlink in each page.

Here we learn how to design hyperlink CSS for different type of html element in website, so it remain consistent

There are different ways to write CSS class for Hyperlink or Anchor Tag

Common CSS Style for Hyperlink

Customise the hyperlink look and feel, change font color, background, font size for every mouse event like hover , mouse out etc.

a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}
            
a:hover
{
    font-size: 15px;
    color: #f00;
    text-decoration: underline;
}
            
a:active
{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}
Hyperlink CSS Style (within any HTML element)

Now you learn how to write CSS for Hyperlink with in some HTML element, for example we write content with <p>, <div>, <span>, <table> tags , so you can define how your hyperlink would look like in content within a <div> tag

Here is Hyperlink CSS example for <div> tag.

div a
{
    font-size: 15px;
    text-decoration: none;
    color: #808080;
}
            
div a:hover
{
    font-size: 15px;
    color: #f00;
    text-decoration: underline;
}
            
div a:active
{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}
Anchor Link CSS Style Examples
  • css anchor tag button Click
    .btn1 {
        padding:10px;
        border:solid 1px #0094ff;
        font-size:large;
        border-radius:5px;
        background-color:#00ff90;
    }
    <a href="#" class="btn1">Click</a>
    
  • css anchor tag no underline, Now, suppose you don't want underline for your anchor tag, you can explicitly define.
    .btn2 {
        text-decoration: none;    
    }
    <a href="#" class="btn1">Click</a>
    
  • CSS for hyperlink anchor tag on hover.
    div a:hover
    {
        font-size: 15px;
        color: #f00;
        text-decoration: underline;
    }         
    

    The above code says, whenever you write any hyperlink a tag inside any div, and when user take mouse pointer over that hyper link then the link will look as per above specified CSS properties.

    Now instead of applying hyperlink hover effect in all the link inside div tag, we could have written a class with same property, means wherever that css class is applied , there the link color will change.

CSS Style Examples