button fill:hover

Hey, i don't know if someone can help me but i'am trying develop this button but i'm stuck i dont know how to do a incline https://codepen.io/andresantos2460/pen/gOEVzbL
No description
No description
6 Replies
Jochem
Jochem5mo ago
easiest way is to replace the background on your ::before to background: linear-gradient(70deg, #3FA8F4 75%, white 75%) ; you'll have to add that to the hover state with both set to 100% or even higher as well, and adjust the width of the ::before
DoContra
DoContra5mo ago
thanks for thghe the help but now when i unhover
DoContra
DoContra5mo ago
check
Jochem
Jochem5mo ago
I've ported your pen over to use a background on the button instead of a ::before: https://codepen.io/jochemm/pen/ExMqpYb?editors=1100
Jochem
CodePen
Santos.
...
Jochem
Jochem5mo ago
couldn't quite get it to work with the before, you'd probably have to mess with its position because linear gradients don't animate
Want results from more Discord servers?
Add your server
More Posts
Is <time> used?Hi! Just wandering if `<time>` is used at all? So many websites have some sort of time data, butDesign for A11y, hide accordion section with css or javascript ?This is for an application that requres log in. I wonder if what I see visually on the page should Is there a bug in Chrome for Android for the position fixed grid children?Hi everyone! Does anyone know if there is any recent change in Chrome for Android generating this wWebsite responisveHi, i started my journey towards fullstack developer about 3 weeks ago and i accepted to create a weHow to display content in a separate smaller window while still being on the main page?Hello everyone, I am designing a desktop app using Electron and React. I would like to display someHaving trouble centering nav bar with content on right/ nav bar shifts depending on text lengthI've created a demo here: https://4c6584fa.portfolio-8nc.pages.dev/ At the very top I am having troNeed help fixing a glitch with my buttonI'm not sure how why its doing what it's doing but whenever I hover and then hover off the btn it do<div> cannot appear as a descendant of <p>. at divGuys help me I am a beginner in JS Some one help me how to solve this error plz Warning: validateDOKey and Code values for "enter" key in mobileMy project isn't working on mobile devices. On desktop, it works when the user press "enter" or "bacbackdrop filter cannot work on firefoxi deployed this webon vercel , some errors occur when I hover on "Product" and the text does not app