Can anyone tell help me make a proper animation for this button? (as in pressing)

Question

.button {
  font-size: 18px;
  font-family: Bradley Hand;
  color: purple;
  background: rgb(0, 255, 0);   /*Default settings for button*/
  border: 5px;
  width: 100px;
  height: 50px;
  transition-duration: 0.5s;
  border-radius: 10%;
}
.button:hover {
  background: rgb(0, 255, 125); /*Changes the buttons size, color,*/
  width: 120px;                 /*and font size*/
  height: 60px;
  font-size: 22px;
}

<button class = "button">Click me!</button>

I want it to look like you are actually pressing a button. Someone help!

score 1 · Accepted Answer · answered Sep 06 '17 at 17:45

1

Try and look at this side on w3schools, they got some pretty good code on button animations. https://www.w3schools.com/howto/howto_css_animate_buttons.asp

answered Sep 06 '17 at 17:45

Seb

525
1
5
25

1

can you vote up my question plz – EgMusic Sep 06 '17 at 18:32
1

If you like my answer, you can accept it :) – Seb Sep 06 '17 at 18:38

score 0 · Answer 2 · answered Sep 06 '17 at 18:28

0

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive

.button:active { /* your code here */}

I suggest you make it darker when clicked, maybe add a gradient inside so it looks recessed.

Style button when :active different from :hover

answered Sep 06 '17 at 18:28

Digits

2,634
2
14
23

1

Thanks! I will do that. – EgMusic Sep 06 '17 at 18:31
can you vote up my question plz – EgMusic Sep 06 '17 at 18:32

Can anyone tell help me make a proper animation for this button? (as in pressing)

2 Answers2