CSS3 Example of Animating Hyperlink Underlines

David G - DrupalRecently I wanted to change how some sidebar and main menu links appear for clients. Typically in HTML a hovered link shows a line underneath the selected link. This line simply appears. But, for those used to Flash or wanting to make your website appear more new and fresh for clients may want to try to use animation to spruce up how your site looks for visitors. So I searched for a way to animate some of the links within my webpage, but not every link. I simply want to animate the links of my main navigation and left side navigation areas. Links found within a pages’ content appear normally and without this affect.

In order to see the desired result I have created a live CSSDeck demo of the final functionality you may press the Edit Code button at top right of the page to interact with the HTML and CSS on that page. I will describe the CSS steps here for your aide.

On this example page I create a Div to contain the link(s) we want to animate when the mouse is hovered over them. On my website these are links in the CSS selectors .region-sidebar-left and #main-menu. You simply need to choose exactly what collection of links you want to animate and create the necessary selector.

Then the fun begins. This technique uses some CSS3 properties to perform the animation. If the client browser does not support the animation effect than the default link rendering occurs in the browser.

To begin with we turn off text-decoration and set the link to position  to relative. To keep things simple we assure when hovered the color does not change:

#example_hover > a {
  position: relative;
  color: green;
  text-decoration: none;
}
#example_hover > a:hover {
  color: green;
}

Then we create our (faux) border, and hide it through a CSS3 transformation. We do this by using a :before selector, and setting the X scale to 0. For legacy browsers we hide this building block with visibility: hidden for browsers that do not support CSS animations.

#example_hover > a:before {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: red;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      transition: width 0.5s ease-in-out 0s;
}

Having constructed our fake border element we tell it to animate all changes applied to it, with a duration of 0.3 seconds. To cause the animation to appear we set the element visible on hover and scale it back to 100% (represented by 1).

#example_hover > a:hover:before {
  visibility: visible;
  width: 100%;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Now our underline link animates as an underline moving from Left to Right (for English text). Used sparingly this technique can add some nice flare to pieces of your website! Happy Coding!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

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