USING CSS3 PSEUDO-CLASSES AND TRANSITIONS TO CREATE INTERACTIVE LINKS AND BUTTONS

Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn’t have to be the case, it’s very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element.

PSEUDO-CLASSES AND SELECTORS

Pseudo-classes for links have been in CSS for many years and for the most part people just reset them all to be the same color and text-decoration. This defeats their purpose and masks the functionality that they provide.

By adding just a few classes to your CSS you can create a much more professional and user friendly menu or form. The pseudo-classes we’ll be looking at today are:

• :focus
• :hover
• :active
• :target
• :first-letter

I’ll also show you how to combine these class selectors to create specific use cases.

GETTING STARTED

The first thing we need to do is give our list of links some basic styling. I’ve gone with a simple blue text on a light gray background. I’ve also removed the text-decoration for now, but we’ll be adding it back in later. To give the links a button-like feel I’ve changed the display to block and added a solid border.

a {        
    color: #1c8dc7;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    background-color: #c2c2c2;
    border: 1px solid #ffffff; 
    display: block;
}

INTERACTING

The first style we’re going to add is when a user hovers over the element. To do this we use the :hover class, here I’m changing the color and background-color to show that the user is actually over the element.

a:hover {
    color: #7cc9f0;
    background-color: #cccccc;
}

Now that we know we’re over an element, we can use the :active class to change the color, background-color and text-decoration when they actually click or press down on the element

a:active {
    color: #7cc9f0;
    background-color: #555555;
    text-decoration: underline;
}

In my sample HTML I’ve provided, each hyperlink has an ID attribute. This enables be to use the :target class to add additional styling to the currently selected element.

a:target {
    color: #f59805;
    background-color: #555555;
    text-decoration: underline;
}

For an added effect, we’re also going to add the little used :first-letter class. This only works on block display elements (which we applied earlier), and all it does is allow us to style the first letter of the element. Here I’ve gone with the color black, but you could use a different font all together.

a:first-letter {
    color: #333333;            
}

a:active:first-letter, a:target:first-letter {
    color: #eeeeee;            
}

As you can see I’ve also combined the :first-letter and :active classes to apply a different color when the element is currently active or targeted.

GOING THAT EXTRA MILE

To really tie these changes together we need to make the changes a little smoother and cleaner. To do this we’re going to use the transition property to make the color changes fade in over a period of time. Here I’ve specified the duration of 0.5 of second, you don’t want the transition to be too quick, but if it’s too slow it won’t look as effective either

a {        
    color: #1c8dc7;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    background-color: #c2c2c2;
    border: 1px solid #ffffff; 
    display: block;
    line-height: 105%;
    
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;                
}

You can see a demo of the styling or download it below

Thanks for your're visiting "Areyan Channel" site, if you satisfied with us share to your friends, please. အလည္ေရာက္လာတဲ႔အတြက္ ေက်းဇူးတင္ပါတယ္။ က်ေနာ္တို႔ ဆိုဒ္ကေန တင္ေပးေနတဲ႔ ပိုစ့္ေတြကို ႏွိပ္သက္မႈရွိရင္ share button ေလးႏွိပ္ျပီး သင့္သူငယ္ခ်င္းေတြပါၾကည့္လို႔ရေအာင္ ေဝမွ်ေပးခဲ့ဖို႔ ေတာင္ဆိုပါရေစခင္ဗ်ာ ေက်းဇူးပါ.. ဒီ "Areyan Channel" site မွ ဇာတ္ကား-သီခ်င္း-နည္းပညာ-ပညာေရ(အဂၤလိပ္စာ)ႏွင့္ ေနာက္ထက္ အစီအစဥ္ေလးေတြကို တစ္စုတစ္စည္းတည္း တင္ေပးသြားမွာျဖစ္ပါတယ္။ ဇာတ္ကားသီီးသန္႔ပဲၾကည့္ ခ်င္တယ္ဆိုရင္ေတာ႔ A.C-2 (Areyan Channel2) site သို႔လွမ္းခဲ့ၾကပါခင္ဗ်ာ။ ဇာတ္ကားေတြတင္ရင္ေတာ႔ Site ႏွစ္ခုလံုးမွာ အတူတူတင္ေပးသြားမွာျဖစ္ပါတယ္ ခင္ဗ်ာ။ Follow ေလးလုပ္ထားခဲ့ျပီးေတာ႔ အားေပးခဲ႔ၾကပါ။
All rights reserved Disclaimer: Areyan Channel is not in anyway associated with Gostream.is, Onlinemovies, Fmovies, Xmovies8, Putlocker sites. We do not host any videos on Areyan Channel itself. "Areyan Channel" is absolutely legal and contains only links to other third party websites like Youtube, Mediafire, Google, Openload, and many more which actually host videos. "Areyan Channel" is not responsible for the compliance, copyright, legality, decency, or any other aspect of the content of other linked sites. If you have any legal issues please contact the appropriate media file owners or linked hosting websites. Areyan Channel only and only provides links to third party video hosting sites which videos are uploaded by third party users.