Design comparison
Solution retrospective
Only worked in the desktop version, will work in the mobile version. Any tips or things I can do to improve?
Community feedback
- @dnewbie25Posted over 2 years ago
Hi! Your design was on point. I see you created the desktop version first and would like to see the mobile as well. The only thing I would modify is the button border. When you hover over the button, that action creates a border of 1px, so when that happens it seems like all the text goes up a little bit. An easy way to solve it is by defining a
border
for the button the same size as the border you want when the users hover the cursor over it.You create that border, but set the color as
transparent
. That way, when people hover the button, the text won't go up. It would be like this:button { position: relative; cursor: pointer; border: 1px solid transparent; //->>the border is defined but left as transparent border-radius: 100px; padding: 15px 35px; margin: 5px; font-size: 14px; } button:hover{ border-color: hsl(0, 0%, 95%); // this will change the color without make that movement in the text }
The above is only if you don't want that text movement. Otherwise, there's no need to change it.
Marked as helpful0@dannyguzman31Posted over 2 years ago@dnewbie25
Daniel, thank you so much for the input and for also providing the example! I really appreciate it for taking the time to do 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