How to make this a sprite sheet

While I fully support @L e n a 's perspective, I believe this exercise is somewhat futile. Here's why:

• Sprite images were initially created to cut down on the number of HTTP requests. With the advent of HTTP/2 and the upcoming HTTP/3 protocols, loading several smaller images is more efficient than a single large image (within reasonable limits).
• Images take longer to render compared to pure HTML and CSS. Therefore, the same buttons can be created using just HTML and CSS.
• More than 70% of users now use touch screens, which do not support hover effects.

Having said that, if your question (which I didn't really understand) only concerns the proximity of each group of buttons, while respecting the consistency of the overall drop shadow, it doesn't matter what pictorial representation each element has, their replacement on hovering must simply respect the initial coordinates and dimensions.
On the other hand, if the middle button seems to sink in when clicked, it will have to “push” the button that follows it, but here we enter an ergonomic construction issue.

If necessary, could you please clarify your question?

When using CSS sprites, think of the page as a mask containing apertures that reveal an image in the background. In this case, it's essential that the “opening” that allows the sprite to appear corresponds to the exact dimensions of the button or icon you intend to display. This ensures that only the desired part of the sprite sheet is visible, avoiding the appearance of unwanted areas.

So, however you build, or compose your background image, all you need to know is the coordinates and dimensions of each element.

For a comprehensive guide on CSS sprites, including advanced techniques like nesting sprites within sprites, you can refer to an article we published a few years ago: Basic Use of CSS Sprites we take a step-by-step approach to building CSS and the overall image... Although the article is in French, the site features an integrated translation tool accessible via the globe icon at the top left corner, allowing you to read the content in your preferred language.

In responsive web design, implementing CSS sprites requires careful consideration to ensure that images scale appropriately across various devices and screen sizes. Traditional pixel-based sprites can become challenging when elements need to resize fluidly. One approach is to design high-resolution sprites and scale them down as needed, ensuring clarity on devices with different pixel densities. However, this can lead to increased file sizes and potential performance issues.

An alternative is to use SVG sprites, which are vector-based and inherently scalable, making them ideal for responsive designs. SVG sprites can be styled and manipulated with CSS, allowing for flexibility without compromising quality.

In summary, while CSS sprites offer performance benefits, their implementation in responsive web design requires careful planning. Choosing the appropriate sprite format and ensuring scalability are key to maintaining both performance and visual integrity across devices.