
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
most proud of getting my Javascript to function, although I really need to improve on speed
What challenges did you encounter, and how did you overcome them?not many challages
Community feedback
- @MarziaJaliliPosted 2 months ago
Hey bro!
Some adjestments you can make to the button:
- A smoother color change.
- Inhert the font-family from the parent element, 'cause buttons don't do so by default.
- 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>Continue</div> </button>
- Then, apply this in css:
button { position: relative; font: inhert; 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!
Other than this your solution is spot on😎😎
Marked as helpful1
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