FAQs on the exercise Buttons: Skeuomorphic styling
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
Why does setting a bottom margin to one button keep the buttons below it from moving down when it’s clicked? I thought this added space below the button.
The issue where Step (2) of Exercise 8/11 compiles an error complaining about a missing color is still unfixed.
The corresponding hex code is #61bff9.
Filed a bug for this too.
The top and bottom margins are already set on the button, but when you change it in the :active class, the sum of the margin stays the same, but the proportions of margin on the top vs the bottom change.
If you right click on the button and click Inspect element you will see the box model diagram displaying the button as initially having a margin-top set to 20px and margin-bottom set to 20px. The sum of the top and bottom margins is 40px.
When you click the button and hold your mouse cursor down, you can see the box model now displays the button as having a margin-top set to 24px and margin-bottom set to 16px. The sum of the top and bottom margins is still 40px.
Since you are changing the sizes of the margin-top and margin-bottom the button actually moves down to look pressed. However, by keeping the same sum/total margin, the space between the other buttons shown below do not change, therefore the buttons do not shift down.
If you look at the initial.css file, (by clicking the folder icon, in the code area and you’ll see the file list) you will see that at the beginning, the answer class assigned to the buttons has a margin of 20px set like this:
margin: 20px;
Which means that all sides of the button have 20px of margin. This also means that margin-top + margin-bottom = 40px.
In this exercise we edit the style.css and change the margin-top to 24px and the margin-bottom to 16px on the .answer:active class which only applies the style when we click it. Doing the math again, this also means that margin-top + margin-bottom = 40px.
If we set the .answer:active class to only have a margin-top to 8px, this means we are removing 12px of space that was originally on the button. This means that margin-top + margin-bottom = 28px. Doing this will cause the buttons to shift up because the sum of the margins is no longer 40px and the actual space between buttons is changing.
See the gif here of me clicking the button with the margin set to 8px and again with the margin-top set to 24px with margin-bottom set to 16px :
I’m on the first step of lesson 8 in Learn Links and Buttons. It’s titled “Buttons: Skeuomorphic styling”.
The step says:
Let’s update the buttons on the page to have a raised appearance.
Start by creating a rule that will apply to all elements with the .answer class. Set a 1-pixel, solid border with the color #466995.
The code I entered was:
.answer {
border: 1px solid #466995;
}
It won’t accept that, and I don’t understand what I did wrong. The class must be selected as .answer, which I did. There’s a rule for the border to be 1px, solid and the color seems to be correct as #466995. What am I missing?
edit: The error that comes up says: Did you create an .answer ruleset and give it a border that is 1px thick?
It really seems like I did.
I’m also stuck on this as well, and checking the solution, it’s the answer is basically the same as the solution. can someone check this exercise please?
No, I just replaced my code with the solution and submitted it and moved on. I did send an e-mail to codecademy about it. Hopefully they can fix it. It seems like a bug.
@matrixmaverick@digital3127464408 What browser are you guys using? It didn’t work for me in Firefox Dev edition but strangely enough worked in Chromium…
Yes this problem is generally I think.
Background solution is, please click get unstuck-Solution-Get Code Solution and Replace With solution. And All instructions are done
) below.
) to up-vote the contribution!
