Assessment needed for A cool looking box

Hi there,

Could I kindly ask someone to have a look over at my code for a cool looking box please, Thank you!

I tried to remove that weird border surrounding my button but I’m not sure how. I’ve tried messing around with the values of the box-shadow and putting a smaller border size but it’s still there.

Link to assessment:

Link to my code:

Hi @Kebin and sorry for the long waiting :sweat_smile:

Nice work on this one! :clap:

Instead of finding the correct pixel value for height to make it look vertically centered, you could also replace height with line-height. Then it would be centered for every height, no matter if you use line-height: 1; or line-height: 8;.

That’s the border and the black inset shadow not playing well together. You could make the inset lighter (gray) and use a darker yellow (rgb(80,80,0)) for the border. This would look better:

border: 1px solid rgb(80,80,0);
box-shadow: inset 1px 1px 1px white, 2px 3px 1px 2px black, inset -2px -2px 5px 1px gray;

I hope that helps. :slightly_smiling_face:

1 Like

Hi @mikoMK

It’s not a problem at all! And thank you for looking over my code! I have applied the changes you suggested and the button looks much better now.

Thanks again!

1 Like

Yep, that’s much better.
Keep up the great work. :slightly_smiling_face:

1 Like