LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / Guest Post » How To Add Special Effects To Your Web Page Links Using CSS?

How To Add Special Effects To Your Web Page Links Using CSS?

How-To-Add-Special-Effects-To-Your-Web-Page-Links-Using-CSS
During website creation and maintenance, we often don’t pay much heed to links. Almost every site web page contains one or more links to it, but the unfortunate reality is that a lot of designers don’t realize how useful those links can be for a site. You can easily manipulate the links using CSS and define them in different states, or make them look like buttons and so on.

Generally, designers most often tend to change the color of the links by defining style on ‘a tag’.

a {color:blue;} //You can change the color to any other color of your choice.

Using the above snippet your users will view same color (that is blue) when they visit and hover the link. In order to style each aspect of the link separately you will have to use link pseudo-classes.

There are four type of link pseudo-classes that you’ll have to define to style each link aspect separately, as listed below:

  1. :link – this is the default style for the link
  2. :visited – after a link has been clicked
  3. :hover – as a mouse is poised over a link (pre-click)
  4. :active – right as the link is being clicked

In order to define any one of the link pseudo-class, you need to use it with the ‘a tag’ in your CSS selector. For example, let’s change the color of all your active links to red. For this you’ll have to write:

a:active {color:red;}

But, if you’re styling any of your link pseudo-class, it’s better to style them all. So if you just want to change the active color to red, and keep all the other pseudo-properties of your links to be grey, you’d write:

a:link, a:hover, a:active {color:grey;}
a:visited {color:red;}

How Can You Change the Link Colors?

One of the most widely practiced and sought-after way to style website links is to change the color when mouse hovers over those link.

a {color:#80BFFF;}
a:hover {color:#FF0000;}

But what you also need to focus upon is how the link looks when it is clicked with the “:active” property.

a {color:#80BFFF;}
a:active {color:#A52A2A;}

Also, don’t forget to check how the link looks when you visit it using the “:visited” property:

a {color:#80BFFF;}
a:visited {color:#D2691E;}

Now, let’s put all the properties together:

a {color:#80BFFF;}
a:visited {color:#D2691E;}
a:hover {color:#FF0000;}
a:active {color:#A52A2A;}

How To Add Backgrounds And Icons To Links?

Another way to style your links requires making the background of your web page stylish, and while adding style to the background, you can even create a link with an associated icon. Remember, to pick a small probably around 15px by 15px, if your text is not large. Simply place the background to one side of the link and set the repeat option to no-repeat.

a {
padding:0 3px 1px 15px;
background:#f2f2f2 url(xyz.gif) left center no-repeat;
color:#fff;
}

Now that you’ve a link with an associated icon, you can change the icon to a different image as your hover the icons or view it in active and visited states:

a {
padding:0 3px 1px 15px;
background:#f2f2f2 url(xyz.gif) left center no-repeat;
color:#fff;
}
a:hover {
background:#f2f2f2 url(xyz2.gif) left center no-repeat;
}
a:active {
background:#f2f2f2 url(xyz3.gif) left center no-repeat;
}

How To Make Your Links Look Like Buttons?

Buttons are an integral part of every site, and almost every web page in a website contain one or more buttons. Since the web industry keeps on evolving and CSS came to fore, we had to create buttons with help of images. However, that results in making your web pages take time to load. But there is a border style using which you add a button-like effect to your link easily with CSS.

a {
border:5px outset;
padding:3px;
text-decoration:none;
}
a:active {
border:5px inset;
}

In order to add a fancy button with colored borders you’ll have to write:

a {
border-style:solid;
border-width:1px 5px 5px 1px;
text-decoration:none;
padding:5px;
border-color:#666 #00f #00f #666;
}

Conclusion

We often pay a lot of focus on creating aesthetically pleasing web design and adding compelling content to the website. But, we don’t pay much attention to styling our links. Bear in mind that even links can impact your reader. So, rather than having boring and underlined links on your web pages, you can make them a part of your design by adding some style to the links. Reading this post will help you learn about some simple tactics to adding style your links.

Sarah ParkerAbout the Author:

Sarah Parker is an experienced PSD to WordPress service provider, and a web designer. With this article, she is making people aware about adding special effects using CSS.

Find Me On GooglePlus

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to “How To Add Special Effects To Your Web Page Links Using CSS?”

  1. Lorey says:

    Hi,
    I have been trying to make my website attractive for a long time but could not. Now the leason I have learned just hope will help me to do this. I want to make side scroll bar like this page. Can you help me. Thanks for sharing the great leason.

    • EXEIdeas says:

      Welcome here and thanks for liking our article. Yes, you can make it using the below CSS code.

      ::-webkit-scrollbar{width:8px;height:8px;}
      ::-webkit-scrollbar-track{background:#FFF;-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;border:1px solid #D8D8D8;}
      ::-webkit-scrollbar-thumb{background:#2299DD;-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);}
      ::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.3);}
      ::-webkit-scrollbar-thumb:active{background:#000;-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3);}

      Stay with us to get more tips like this…

  2. Dajoel says:

    Very nice articles.. I will apply it in my wordpress. I have couples domain and I will make it fantastic base on your idea

Leave a Reply

Your email address will not be published. Required fields are marked *