Issue

This Content is from Stack Overflow. Question asked by kniro

Temporarily, I simply wrote the names of the buttons Grid and List:

<button value="product_card_frontpage" class="grid-view">Grid</button>
<button value="product_card_full_width" class="list-view">List</button>

But in the final result, the buttons should not have the labels Grid and List. And they should look like this:

Solution

You can just make the button an image like this:

<!doctype html>
<html>
<body>
<button value="product_card_frontpage" class="grid-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2017/02/17/20/04/vector-frame-2075122_1280.png"></button>
<button value="product_card_full_width" class="list-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2021/10/09/12/45/hamburger-icon-6694072_1280.png"></button>
</body>
</html>

I used generic photos, but you can pick the photo you want to show and edit the styles.

This Question was asked in StackOverflow by kniro and Answered by NinjaCoder It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.