css - Developing different palettes of colors to apply to the same button definition - Stack Overflow

admin管理员组

文章数量:1343311

I have the following CSS definition to generate a right-arrow-like button:

.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;
}

The button is defined as follows:

<button class="btn btn-arrow-right"><a href="#">MyButton</a></button>

As you can see, I have three colors:

#29c0d5 for the button background
#1897c0 for the button shadow
#68d3e2 for the hover/focus effect

I would like to define different palettes of three colors to apply to different buttons without changing the original definition that is included in the of my index.php file. Which is the most elegant and readable way to do it, by defining buttons as follows:

<button class="btn btn-arrow-right red-palette"><a href="#">MyRedButton</a></button>
<button class="btn btn-arrow-right blue-palette"><a href="#">MyBlueButton</a></button>
<button class="btn btn-arrow-right green-palette"><a href="#">MyGreenButton</a></button>

本文标签： cssDeveloping different palettes of colors to apply to the same button definitionStack Overflow