Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not support array declaration. Is this correct? If so, what alternative methods can I use to assign different images to each button?
HTML
...
...
<button class="access_item">
<span class="access_icon">
</span>
Button_1
</button>
<button class="access_item">
<span class="access_icon">
</span>
Button_2
</button>
<button class="access_item">
<span class="access_icon">
</span>
Button_3
</button>
...
CSS
.access_item {
display: inline-block;
background: none;
border: 0;
cursor: pointer;
appearance: none;
}
.access_icon {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
/* Each button will have its distinct background image */
background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
margin-bottom: 20px;
}