10 Custom CSS & JavaScript Hover & Click Effects
Developers can make some crazy effects with simple user actions like hovers and mouse clicks. These mostly relate to desktop users but the mobile web also supports click/touch effects in most browsers.
If you’re looking for some cool ideas to replicate in your own projects then this collection is sure to have something for you. Anyone who knows a little JavaScript and CSS can easily tweak these effects to work in any browser, for any website, and spruce up the experience of a layout.
Button Hover Effects
The obvious starting point for animation effects is CSS buttons. These are the most practical in everyday use since they handle a lot of interactivity. CTA buttons are practically begging for attention and with these hover effects you can grab attention even quicker.
Each effect uses pure CSS for the animation. A couple of these buttons rely on JavaScript for the mouseover events, but all the animations are still controlled right in CSS.
If you’re designing a flat layout these animations will be super easy to work in.
Nav Hovers
For this pen you’ll find a handful of navigation hover events. These rely on pure CSS which again controls each hyperlink with a different hover effect.
Navigation menus are typically very simple and generic. That’s why hover events can really spice up the design and show visitors you care about the little details.
Most of these animations are tame enough to fit onto any website, so they’re great for easy copy/pasting into any layout.
Photo Hover Effects
How often do you find photo galleries with boring subtitles and no real context? I see these all too often, and they just feel lazy.
I really like these photo effects which all rely on the simple thumbnail gallery. When you hover an image, you’ll see the photo’s title, a description, and a “read more” button.
Each element slides into view from different angles and it helps this image gallery pop right off the page.
CSS Tooltip Hovers
Every browser supports default tooltips but you can always make your own using plugins or by cloning pens like this. It was developed by Ty Strong and shows just how far you can take pure CSS tooltips.
This entire snippet works by targeting the HTML <dfn> tag. When hovering any text wrapped in this tag it’ll automatically fade into view on hover appearing like a tooltip.
Pure CSS triangles have been around for years so it’s easy enough to recreate the tooltip style. But I’m most impressed with the smooth animation states all controlled through CSS3.
CSS Icons on Hover
Here’s yet another example of something cool you can make with pure CSS. These simple buttons all have hidden icons which only appear when a cursor lands on top of them.
Each icon comes from Font Awesome so you can replicate this design with totally free icons.
The effects include slide-ins, stretches, and fading icons that appear on hover and disappear when the cursor moves elsewhere.
Infinite Pagination
Web pagination is always pretty boring, probably because it’s not a flashy part of the interface. But with this pagination effect by Mariusz Dabrowski you could take your pagination to the next level.
The only thing about this animation is that it’s made to load from one page to another. So it works best with Ajax-powered pages where the whole page doesn’t reload. This way the entire animation is visible while the new contents load into view.
It definitely has limited practical value but the effect is superb.
Overlay Nav Animation
Fullscreen nav menus are very popular for mobile responsive websites and they work for most users too. But these don’t have to be boring or static when you have overlay effects like this for free on CodePen.
Developer Ryan Mulligan created this beastly animation with pure CSS keyframes running on a single CSS class.
The click event is triggered via jQuery, but the motion is all CSS. Definitely one of the cooler animations I’ve seen and it’s surprisingly smooth to boot.
Pure CSS Click Effect
Google’s material design outlines a number of animated effects and one is the ripple click effect. This is most common with Android devices, but it has leaked its way onto the web too.
And with this pen you can replicate the ripple effect in your own work using nothing but CSS code.
This snippet targets icons that also light up when selected, so it’s a bit more like tabbing/selecting page elements. But the effects are transferable to anything which makes this easy to clone.
Mana Button
Here’s one of the most unique button effects I’ve ever seen using SVGs for the shapes and CSS for the animation.
Coder Dean Hidri built this mana button effect with only 80 lines of CSS and a couple dozen lines of HTML(with the SVG included). On hover this button animates a custom liquid shape inside the button to create a background fill, then animates out afterwards.
If you have a site that could use this button style it’s definitely worth toying with.
Iconic Button FX
You can do a lot with icon fonts and these animated buttons by David Darnes are a great example.
The icons animate in a different way when hovered, each with their own signature effect. You may not use all of these icons in one website, but the custom animation styles are easy to clone. They work solely on CSS3 and they’d fit with any icon font you choose. A really fun effect to clone for pretty much any website!
And that wraps up my list of UX effects, but this certainly isn’t the definitive collection.
If you scour the web you can find lots of other button/icon hover effects and many have free source code. But if you wanna learn more about custom web animation check out our massive list of plugins and resources for developers.
The post 10 Custom CSS & JavaScript Hover & Click Effects appeared first on Speckyboy Web Design Magazine.