@dnewbie25
Posted
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 helpful
@dannyguzman31
Posted
@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!