In this article, we will learn how to do the styling of links and buttons in CSS.

We can style the color, background color, and many other properties of the link(or anchor tag) by targeting the <a> tag.

For Example:

a { 
   color:green;
   }

Output:

Before learning about the styling of links and buttons, we have to be familiar with the pseudo selectors.

Pseudo Selectors: Pseudo selectors are the keyword added to the selectors which helps us to style the specific part of the selected element.

For Example:– a: hover (in this the: hover is a pseudo selector).

Link States

To style the link, firstly we have to understand that there are various states of link in which it can exist. and links can be styled accordingly depending on in which state the link exists.

There are the following types of Link States:

• Link: A normal link that has a destination(i.e. not just a named anchor tag). styled using a:link.
• Visited: A link that a user has already been visited. styled using the a:vistied.
• Hover: A link that has been hovered by user using the mouse. styled using a:hover.
• Focus: A link that has been focused by a keyboard user using the tab key. styled using a:focus.
• Active: A link that is just been clicked(or the active page in navigation menu like when we are in homepage, the home icon is styled diffrently among the other items in navigation menu). styled using a:active.

The Link states must come in the same priority while using in CSS. So that they perform their respective method properly.

Firstly, a:link then, a:vistied then, a:hover then, a:focus and lastly a:active.

Let’s create a link using all the above link states.

For Example:

We can also add background color to the link.

The link has an underline(by default). So in order to remove it, we use the property text-decoration with value none.

a:link {
        color: green;
        background-color: #aaaaaa;
        text-decoration: none;
       }

a:visited {
           color: blue;
           background-color: yellow;
           text-decoration: none;
           }

a:hover {
         color: black;
         background-color: white;
         text-decoration: underline;
         }

a:focus {
         color: grey;
         background-color: cyan;
         text-decoration: underline;
         }

a:active {
          color: red;
          background-color: purple;
          text-decoration: underline;
          }

Output:

Try all methods like hovering and visiting the link and see if anything happens.

Types of Cursors:

The cursor property is used to manipulate the shape of the arrow we see when we hover over the link.

Let’s see the types of cursors using an example.

For Example:

<p style="cursor: pointer">pointer</span><br>
<p style="cursor: default">default</span><br>
<p style="cursor: auto">auto</span><br>
<p style="cursor: text">text</span><br>
<p style="cursor: crosshair">crosshair</span><br>
<p style="cursor: e-resize">e-resize</span><br>
<p style="cursor: help">help</span><br>
<p style="cursor: move">move</span><br>
<p style="cursor: n-resize">n-resize</span><br>
<p style="cursor: ne-resize">ne-resize</span><br>
<p style="cursor: nw-resize">nw-resize</span><br>
<p style="cursor: s-resize">s-resize</span><br>
<p style="cursor: se-resize">se-resize</span><br>
<p style="cursor: sw-resize">sw-resize</span><br>
<p style="cursor: w-resize">w-resize</span><br>
<p style="cursor: progress">progress</span><br>
<p style="cursor: wait">wait</span>

Output:

Link Buttons

Styling links as buttons. we can learn this using a simple example in which we will give color, background color, padding, and some other properties to make it look like a button.

For Example:

a:link, a:visited {
                   background-color: #43f436;
                   color: black;
                   padding: 10px 35px;
                   text-align: center;
                   text-decoration: none;
                   display: inline-block;
                   border-radius: 30px;
                  }

a:hover, a:active {
                   color: white;
                   background-color: green;
                  }

Output:

That’s all about the Styling of links and buttons in CSS.

Hope this article will guide you to recognize all about Styling links and buttons in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.