While the title provides some context, allow me to elaborate further. I've been working on a website for quite some time now. Each section of the website features 3 buttons, each highlighted in a unique color. My question is, is there a more streamlined approach to achieve the following:
/* Button 1 */
#button1 {
display: inline;
margin-left: 26px;
color: orangered;
border: 3px solid orangered;
box-sizing: border-box;
padding: 7px 30px 7px 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#button1:hover {
background-color: orangered;
color: white;
}
/* Button 2 */
#button2 {
display: inline;
margin-left: 26px;
color: dodgerblue;
border: 3px solid dodgerblue;
box-sizing: border-box;
padding: 7px 30px 7px 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#button2:hover {
background-color: dodgerblue;
color: white;
}
/* Button 3 */
#button3 {
display: inline;
margin-left: 26px;
color: #DD3157;
border: 3px solid #DD3157;
box-sizing: border-box;
padding: 7px 30px 7px 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#button3:hover {
background-color: #DD3157; color: white;
}<a href="#" id="button1">Read more</a>
<a href="#" id="button2">Read more</a>
<a href="#" id="button3">Read more</a>There must be a simpler solution for this.