Разработка различных палитр цветов для применения к одному и тому же определению кнопки. ⇐ CSS

[Anonymous]

У меня есть следующее определение CSS для создания кнопки, похожей на стрелку вправо:
.btn-arrow-right {
background: none;
border: 0;
font-size: 22px;
line-height: 2em;
position: relative;
width: 8em;
height: 2em;
}
.btn-arrow-right a {
color: #fff;
text-decoration: none;
position: relative;
z-index: 10;
}
.btn-arrow-right::before, .btn-arrow-right::after {
background-color: #29c0d5;
border-radius: 2px;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
transition: all 1s;
height: 1em;
}
.btn-arrow-right::before {
box-shadow: -1px 1px 0 #1897c0, -2px 2px 0 #1897c0, -3px 3px 0 #1897c0, -4px 4px 0 #1897c0;
transform: skew(45deg);
top: 0;
}
.btn-arrow-right::after {
box-shadow: 1px 1px 0 #1897c0, 2px 2px 0 #1897c0, 3px 3px 0 #1897c0, 4px 4px 0 #1897c0;
transform: skew(-45deg);
bottom: 0;
}
.btn-arrow-right:hover::before, .btn-arrow-right:hover::after {
background: #68d3e2;
}
.btn-arrow-right:focus {
outline: 0;
}
.btn-arrow-right:focus::before, .btn-arrow-right:focus::after {
background: #68d3e2;
}

Кнопка определяется следующим образом:
MyButton

Как видите, у меня три цвета:
#29c0d5 for the button background
#1897c0 for the button shadow
#68d3e2 for the hover/focus effect

Я хотел бы определить разные палитры из трех цветов для применения к разным кнопкам, не меняя исходное определение, включенное в мой файл index.php.
Это Самый элегантный и читаемый способ сделать это, определив кнопки следующим образом:
MyRedButton
MyBlueButton
MyGreenButton


Подробнее здесь: https://stackoverflow.com/questions/793 ... definition