How To Make Anchor Tag Link Look Beautiful ?

In a website the hyperlinks are very important and discussable. The more elegant design of the link the more chances for that link to be clicked. So, it is necessary to have a good looking links. Here I will discuss the process to do this task.

A website has links and these are actually <a> tags. If you write only the basic format like this -->

        

<a href="#">Click Here</a>

It will look like a very normal link with underline------>

Click Here

You can see that this link is not at all attractive to be clicked.  But some lines of CSS will make it so beautiful. Let's do that. At must you have to remove that underline with property {text-decoration: none;}. Then to change the color and background {color: #fff; background: #00cc99}. But still it is not  looking so good .Now lets give padding {padding: 5px 16px;}.  You will see that padding will not work properly as the a tag is an inline element. You have to make it {display: inline-block;}. Now it looks pretty and to round the corners {border-radius: 3px;}

In total ----

a {
    text-decoration: none;
    color: #fff; 
    background: #00cc99;
    padding: 5px 16px;
    display: inline-block;
    border-radius: 3px;
   }

Now the link will finally look like----->

Click Here

Now you see that the link is looking good. You can give hover effects to this link on the color and background. Follow the code below.

a:hover {
  background: #333;
}

But the now the background-color change will occur so fast. You have to add a transition to the a tag to make the background color changing smooth when hovered. 

a {
    text-decoration: none;
    color: #fff;
    background: #00cc99;
    padding: 5px 16px;
    display: inline-block;
    border-radius: 3px;
    transition: 0.3s;
   }

Now check out the final result---->

Click Here

Now if you want to use this link style many times in your website , then just make a common class and set these properties and apply that class whenever needed. For example--->

.my-btn {
   text-decoration: none;
   color: #fff;
   background: #00cc99;
   padding: 5px 16px;
   display: inline-block;
   border-radius: 3px;
   transition: 0.3s;
 }
 .my-btn:hover {
   background: #333;
 }

Here my-btn is the classname. you can use this class to any anchor tag in HTML and the same styles will be applied all around. That's all for this post.

Hope you like it. You can comment below. Thank You and have a nice day ..........