Can I add additional background attribute to subclass? - html

Question

I have a CSS file that has code looking like this...
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s
}
button.oneshot{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("oneshot.png") center 60%;
button.lisatp{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("lisa the painful.jpg") 45% 60%;
}
...
...
As you can see, there is a line that is repeated in the subclasses oneshot and lisatp:
linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed
However, since each subclass also has an image as the background as well, I can't find a way to place the repeated line in .button.
Is it possible to somehow simplify this even more, or is this as simple as it is going to get?

Answer 1

Use CSS variable to simplify this then you will be able to easily change the gradient for all the element of each one individually:
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s;
--grad:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed;
background:var(--grad);
}
.button.oneshot{
background:var(--grad),url("https://lorempixel.com/400/200/") center 60%;
}
.button.lisatp{
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
.button.new-grad{
--grad:linear-gradient(rgba(0,190,0,1),rgba(0,190,0,0.4),rgba(0,180,0,1)) no-repeat center center fixed;
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
<span class="button"></span>
<span class="button oneshot"></span>
<span class="button lisatp"></span>
<span class="button new-grad"></span>