Put a button into 3 images - css

Question

I would like to put a button on 3 images. I made this:
I think my code is very long in my CSS? I often use the property left for each button, is it correct?
I think that I can delete .button_red_02 and .button_red_03?
In my HTML code I have ths:
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
Then, in my CSS code I have this
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>

Answer 1

As soon as you have the same CSS specifications for multiple objects, you can use classes and assign these to all of the objects required. In your example you do not need to have the same CSS for each button since all of them have mainly the same properties.
For the positioning I suggest to add unique IDs to each button to handle the positioning individually.
Note that each ID should only be used once (unique identifiers!) within your html template.
To select classed objects, use .classname, to select ID linked objects use #IDname.
Also since your browser reads your CSS file from top to bottom, you can change single properties for each button within its ID selector, for example
#button_red_01 {
background-color: blue;
}
For further insights on classes and IDs I highly recommend the MDN resource https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/class.
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button {
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#button_red_01 {
left: -10px;
top: 150px;
color: #2B28D8;
}
#button_red_02 {
left: 370px;
top: 150px;
}
#button_red_03 {
right: 334px;
top: 150px;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>