Make Anything Clickable Have Its Color Fade In/Out

Whenever a link or a button is moused over, it may have a hover action that changes its color. By default it is an instantaneous change in color. The mouse moves over it, it changes color, the mouse leaves, it changes color back. It's very abrupt. If you would like to make it so that the buttons, links, icons, etc slowly fade in and fade, apply the following code. Note: For this to work there needs to be a "hover" action changing the color. This works for:

• All links (in your breadcrumb, in your caption, anywhere)
• Buttons (like the slideshow and "Add to Cart")
• Icons like the like, share, download, tools, and info buttons

/* Transition the links so they fade in and out */
a { 
  -webkit-transition:color 0.25s ease-in;
  -moz-transition:color 0.25s ease-in;
  transition:color 0.2s ease-in;
}

/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Transition the links under the photo */
.sm-button .sm-fonticon-small, 
.sm-user-ui .sm-button-label,
.sm-fonticon {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2 ease-in;
}