The Summit - Why my button link won't move downwards?

Get Help CSS
#1

Hi, I would like to make the button interactive and when I click on the button it will offset down.

I’ve set the .btn:active to margin-top: 4px , it supposed to move downwards when I clicked on it. However, I’ve clicked on the button and it wouldn’t move down, it just removed to box-shadow . I would appreciate if someone can help me with this problem, thank you!

This is the picture with .btn : Here is the picture with
This is the picture with .btn:hover : Here is the picture with
This is the picture with .btn:active : Here is the picture with

My CSS code are as below:

.btn {
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  color: #f2f2f2;
  border: 1px solid #f2f2f2;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px;
}

.btn:hover {
  background-color: #f2f2f2;
  color: #2176FF;
  transition: color .1s ease-in, background-color .1s ease-in;
}

.btn:active {
  margin-top: 4px;
  box-shadow: 0px 0px;
}
#2

I’ve solved the problem !!

The reason that the margin-top doesn’t work is because of the <div> above of this button have margin-bottom of 80px, which will cause the button element collapse into the top margin. So my solution is set the button element (.btn) to have the property of display: inline-block .

Hope this answer would help anyone who have the same problem as me. xD

#3

Thanks! this :+1: was helpful