How to make this effect for the buttons?

Question

the circle has taken with fontawesome

Deon98 asked July 8th 19 at 15:27

Related questions

4 answers

german.Roga answered on July 8th 19 at 15:31

What kind of effect ? The fact that you threw not, it is not clear in these pictures ) Actually hover help

on button click we have to move the circle down - Deon98 commented on July 8th 19 at 15:34

Timmothy.Thiel answered on July 8th 19 at 15:33

Using JS to catch the click on the button and add a class to animate the icon.

Else.Mohr32 answered on July 8th 19 at 15:35

Something like this:

$(button).on('click', function(e){
e.preventDefault();
$(this).addClass('animate');
});

button.animate {
 transform: translateY(10px);
}

maggie_Hagenes59 answered on · Accepted Answer · 2019-07-08T15:29:33.304Z

maggie_Hagenes59 answered on July 8th 19 at 15:29

Solution

.button .icon {
 position: relative;
}
.button:active .icon {
 top: 1px or more
}

or translate