New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

CSS Background Hover Slide Effect

While working on the site’s 24th redesign, I played around with a number of styles to customize the appearance of links. As you can see by hovering over any link, I decided to keep the styles as minimal as possible while still letting the user know that, “hey, this is a link”. This quick post shares one of the link styles I was considering, it’s sort of a “slide-up” background-color effect that happens when the user hovers over the hyperlink.

Demo

Code

So if you like the demo and want to use the code or just play around whatever, you can inspect the demo source code or grab it from here:

a {
	padding: 5px; 
	display: inline-block;
	text-decoration: none; 
	transition: all 0.3s;
	background-size: 100% 200%; 
	background-image: linear-gradient(to top, #333 50%, #fff 50%); 
	color: #333;
	}
a:hover { 
	background-position: 0 100%; 
	color: #fff; 
	}

The only real “trick” here is using linear-gradient for the background-image, and doubling the background height @ 200%. The transition property is added to give the “sliding” effect, instead of just jumping back and forth between background styles. All the other CSS is added for general styling and clarity. Feel free to experiment, I know just from experimenting with border styles, colors, and so forth, it’s possible to enhance the background slide effect and make some pretty sweet looking anchor tags.

Bonus

A lot of times you want to target just certain links, or not target certain links. When I was experimenting with the hover background link styles, there were some links that I wanted to exclude (like the site header logo, sidebar ads, image links, and so forth). So I had two choices:

  • Add a class to every link that should have the hover effect
  • OR, add a class to the few links that should NOT have the hover effect

Of these, the easiest, least invasive, obvious choice was to just add an .exclude class to the few links that should not be styled. Going that route, I also needed to modify the hover-effect CSS code:

a:not(.exclude) {
	padding: 5px; 
	display: inline-block;
	text-decoration: none; 
	transition: all 0.3s;
	background-size: 100% 200%; 
	background-image: linear-gradient(to top, #333 50%, #fff 50%); 
	color: #333;
	}
a:not(.exclude):hover { 
	background-position: 0 100%; 
	color: #fff; 
	}

Notice the only difference here: we refined the two anchor selectors by adding :not(.exclude) to each. So now the styles will be applied to any link that doesn’t have an exclude class. So now you have the power.

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Digging Into WordPress: Take your WordPress skills to the next level.

2 responses to “CSS Background Hover Slide Effect”

  1. Jim S Smith 2019/02/21 8:55 pm

    Nice little primer (or refresher, for some) on some of the finer qualities of CSS3.

    Sometimes,

    I’ll use the hover effects on certain elements that have a filled in “title” attribute. Makes for a great “Hey! Over here.” message.

    I also definitely appreciate that we have the “transition” property to play with. It’s nice to be able to do from CSS, instead of being reliant on JavaScript for EVERY effect.

    – Jim

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Deep dive into WP theme development.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.