Real life button simulation


#1

Hi all,

I am just a beginner. Below is the snippet from an exercise that i was going through.

"Add the following CSS to the .contact-btn a:active selector:

top: 2px;

This will cause the Contact button to move down slightly while being clicked, simulating a real-life button being pushed."

Unfortunately , i dont see any slight movement of button when click it. Please advice.I tried changing pixels but no use.


#2

Hi

could you provide some code from the main.css, please?
are you sure that you put the required code in the correct selector section? The one which ends with "active" is executed when the button is clicked.

Cheerio


#3

Thanks for helping here, below are codes for "button"

.contact-btn {
float: right;
}

.contact-btn a {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
position: relative;
}

.contact-btn a:active {
top: 2px;
}

I was advice that :active is a psuedo-class selector, which we use to style an element only while it's being clicked.


#4

Your code looks fine. When you click on the Contact button, the button looks like it is being pushed.
Which browser do you use? Maybe try a different browser.


#5

Ah, my bad!

Thank you sir. I used chrome, now i tried in IE and firefox it works

Thank you.


#6

Hi everyone! Sorry if this is a weird place to post this response but -- I'm encountering the exact same problem, and switching browsers doesn't work.

I think my code is exactly the same, but let me just copy and paste is here for reference:

.contact-btn {
  float: right;
}

.contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  position: relative;

}

.contact-btn a:active {
  position: relative;
  top: 2px;
}

Any other reasons why it doesn't work? Thanks in advance!


#7

what error did you get? and which browser do you use?

for the .contact-btn a:active selector you don't need position: relative;


#8

Hello,
I have the same problem and it doesn't work for me in Firefox.
Any ideas?
Thanks!


#9

Never mind, my solution is to logout and then log back in. Now it works. I had refreshed the page, but that didn't work. Logging back in did work.


#10

Thanks. I had the same problem. Logging out and in solves it.


#11