How to make this effect for the buttons?

6722d87b6adc4437a0514f3a1d3522b8.pnged4faf4c8b344fa88a2cf18296620cfd.png
the circle has taken with fontawesome
July 8th 19 at 15:27
4 answers
July 8th 19 at 15:29
Solution
.button .icon {
 position: relative;
}
.button:active .icon {
 top: 1px or more
}

or translate
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
July 8th 19 at 15:33
Using JS to catch the click on the button and add a class to animate the icon.
July 8th 19 at 15:35
Something like this:
$(button).on('click', function(e){
e.preventDefault();
$(this).addClass('animate');
});


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

Find more questions by tags JavaScriptCSS