You assumed that 1rem = 10px, which is not right. It’s true that in practice many developers start setting the global font size as 10px for easiest manipulation, but in this example that wasn’t the case and the global font size is the default in your browser which is 16px.

The assessment guidelines ask for vertical alignment in our button, that can be accomplished with line-height . You can remove the height declaration if you want and other declarations you added trying to get vertical alignment.

normal shadows and inset ones look okay for me, and the linear-gradient is not exactly as the one asked, but it looks cool .

Question: Should I use rem for everything, or just for font sizing and other wide scales? My logic is to use rem for things that can affect the layout if confronted with different resolutions and leave pixels for cosmetic design only such as border-radius, text-shadow, etc etc.

You could theoretically use rem for everything, but yes, it makes sense to use it for things that would make sense to adjust with the font size, such as line height, letter spacing, etc., and use pixels for stuff like border-radius/box-shadow — you wouldn’t want these to differ with resolution (probably).