Keep button borders and text in sync without repeating the same color value in multiple CSS declarations.
When a button’s border should match its text, repeating the same color for both properties makes additional color schemes harder to maintain. The example below resets border-color with unset so the border follows the text color.
Compare the following button styles:
<style>
.button {
color: red;
border: 2px solid red;
border-color: unset;
display: inline-block;
text-decoration: none;
padding: 1em;
}
.button.blue {
color: blue;
}
.button.green {
color: green;
}
</style>
<p><a href="#" class="button">Default Button</a></p>
<p><a href="#" class="button blue">Blue Button</a></p>
<p><a href="#" class="button green">Green Button</a></p>You can also omit the color from the initial border shorthand declaration:
<style>
.button {
color: red;
border: 2px solid;
display: inline-block;
text-decoration: none;
padding: 1em;
}
.button.blue {
color: blue;
}
.button.green {
color: green;
}
</style>
<p><a href="#" class="button">Default Button</a></p>
<p><a href="#" class="button blue">Blue Button</a></p>
<p><a href="#" class="button green">Green Button</a></p>The border shorthand does not accept 2px solid unset. Use a valid color value, omit the color, or reset border-color separately.
