Free Web Development Online Tutorials, Learn to Code
CSS class for hyperlink color Examples, Anchor tag CSS class, Free CSS Tutorial for Beginners

Anchor tag CSS style

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

Hyperlink CSS Style

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.

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

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 anchor tag on hover

Comment
Name
Email
Website
Subscribe
CSS Style Examples