You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙
CSS Tip! ⭐️
You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙
button > span {
left: calc(var(--x, 0) * 1px);
top: calc(var(--y, 0) * 1px);
mix-blend-mode: difference; 👈
}
The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you!
As for how to move that spot around? A teeny bit of JavaScript 🤏
const UPDATE = ({target, x, y }) => {
const bounds = target.getBoundingClientRect()
target.style.setProperty('--x', x - bounds.left)
target.style.setProperty('--y', y - bounds.top)
}
const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))
On :hover you can use a scoped custom property to change the size of the spot
button:is(:hover, :focus-visible) {
--active: 1;
}
button span {
transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
transition: transform 0.25s;
}
But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨
@supports (transition-timing-function: linear(0, 1)) {
button:is(:hover, :focus-visible) span {
transition-duration: 0.5s;
transition-timing-function: linear(
0, 0.5007 7.21%, 0.7803 12.29%,
...
);
}
}
#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending #viral #ui #webdevelopment #website #webdesign #webdeveloper #webdesigner #web3 #html #html5 #codepen #css #css3 #javascript #jquery #angular #react #creative #creativity #video #videos #vlog #vlogs
🎯 SUBSCRIBE to get more amazing AI Videos!
► https://www.youtube.com/@3sdcode?sub_...
Video Credit By: https://twitter.com/jh3yy
Source Code: https://codepen.io/jh3y/pen/OJdwEEv