2015 January 31 Archive - EXEIdeas – Let's Your Mind Rock

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::link – this is the default style for the link:visited – after a link has been clicked:hover – as a mouse is poised over a link (pre-click):active – right as the link is being clickedIn 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;}ConclusionWe 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.About 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