How to make such buttons?

Question

css

How are such buttons typed up from a practical point of view?

Here is my psd template. These buttons have the same buttons on the layer below, but in black and white. As I understand it, when you hover over the button, the image should change from black and white to color.
Actually, the question is, do I need to manually cut them out of the psd template, then make sprites with color and black and white and then insert them into html, for example, with a or button tags with a button image background?
Do layout designers also cut out such buttons from the template or adjust them by eye through css to the desired look?
I hope the question is clear.
Thanks in advance

Answer 1

In any case, you need to have separate color and black-and-white icons. You can display it as a background for the block, specifying the desired position, or cut it out.

Answer 2

There is also a completely non-cross-browser CSS3 solution. You cut one sprite and write this style for it:

.social {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: -webkit-filter 0.5s;
}
.social:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}