Links and text shouldn’t just look different. Adding a hover effect to your links is a simple and effective way to meet their needs. Whether your users are colorblind or not, everyone should be able to spot and target links with ease. Use arrow affordances, underlines and block highlights to make them accessible to all users. You should style your mobile links as if the hover effect is already triggered. This means that your mobile links need to have high color and shape contrast on them before the user taps. Hover effects won’t work on mobile devices because there’s no mouse cursor. For high shape contrast, you should underline or block highlight your links. To add high color contrast color to your hover effect, you should vary the hue from a cooler to warmer color. The perfect one will display a high level of color and shape contrast. But there are things you can do to get the perfect hover effect. The Perfect Hover EffectĪ low contrast hover effect is not as effective as a high contrast one because it’s not as noticeable. Instead, their focus remains on the page content. This allows them to target and click links quicker without focusing on their cursor. With a hover effect, users can move their mouse towards the link and click as soon as they see the hover effect. Otherwise, they’ll end up misclicking the link.
But they have to check if their cursor is on top of the link before they can click. When users see a link, they’ll move their mouse towards it. Normal users will be able to see links better, but they still have to make an effort to target them. Decreasing Mouse Cursor FocusĪ lack of a hover effect not only affects colorblind users, but also normal users. When users move their cursor over a link, they’ll notice a change in color or shape that tells them to click. Colorblind users have to rely on their cursor change (arrow to hand) as feedback.Ī hover effect can give them a clear signal to see what’s clickable. The difference in color is hard for them to see. But that’s not enough contrast for colorblind users. Most sites make their links a different color from their text. If your links don’t have enough contrast, users could miss them.
When users read a web page, they need to be able to distinguish what’s clickable. Links contain text, but they should never look like text.
Import 'splitting/dist/splitting-cells.css' Ĭonst cursor = new Cursor(document.querySelector('.cursor')) Splitting (used to split the menu item texts to spans/characters) We want to change the translation values of each character and also it’s color. We’ll use the Splitting library to split the menu texts into spans/chars so we can animate each one individually. RequestAnimationFrame(() => this.render()) Īs an extra, let’s add a little glitch effect to the menu items texts when we hover over them. So we add a media query with the any-pointer media feature. Let’s set up our menu with some data-splitting attributes: įirst, we need to hide our cursor by default, and we just want to show it if the user has a pointing device, like a mouse. The Markupįor the SVG cursor we want a singe SVG for each line that has enough of space to get the distortion effect applied to it: We’ll also add a nice hover animation for some menu items using Splitting.js.
Let’s have a look how to create a fullscreen crosshair cursor in SVG and how to distort the cursors’s lines with an SVG filter when hovering over links. Custom cursors have been very popular and there’s so many creative possibilities that can enhance a certain design and an interaction logic.
Today I’d like to show you how to code a special cursor effect.