
Design comparison
Solution retrospective
In the design files paddings and margins are not provided so I had to guess some of them. That was terrible experience :D
What specific areas of your project would you like help with?I don't know how to make smooth transition when you hover on the button. I know the transition property but when I have background-color and linear-gradient on hover this transition have some weird behaviour.
I appreciate all kind of feedback.
Community feedback
- @MarziaJaliliPosted about 1 month ago
REAL great job, man!
Some adjestments:
For a smoother color change we usually use the
transition
property, but unfortunately it doesn't work with non-solid colors likelinear-gradient
.Therefore, we have to use the
::before
or::after
pseudo elements.- Take the code below as an example for html:
<button> <!-- to prevent the text of being hidden we have to wrapp it inside an element --> <div>Subscribe to monthly newsletter</div> </button>
- Then, apply this in css:
button { position: relative; background: black; /* or the code of that dark blue color */ /* ensure that the text doesn't get hidden */ & > * { position: relative; } } button::before { position: absolute; content: ""; height: 100%; width: 100%; top: 0; right: 0; background: linear-gradient(codes of the two or more colores); /* we will only show it on hover so now it will be hidden... */ opacity: 0; transition: opacity .4s; } button:hover::before { /* make the pesudo element appear */ opacity: 1; }
This definitely works!
I had the same issue in one of my projects but by applying this code I got the job done.
😎😎😎
Marked as helpful0P@SKszymekPosted about 1 month ago@MarziaJalili Thanks I will save this code in case I need that.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord