Transform - Skew anchor tag background only

Question

Without changing the HTML, how can I make the text straight while keeping skew on the background only?

https://jsfiddle.net/z4ms6k07/1/

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

Answer 1

You can skew the text back. Since transform doesn't work on non block elements, and a is an inline tag, you need to change the a tag display to inline-block or block:

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  display: inline-block;
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

Answer 2

If you add display: block; or display: inline-block; to a tag, that would make it work with the transform property. So in order to use the transform: skew(-59deg) you have to add display: block; or display: inline-block; to a tag

.btn {
    display: inline-block;
    padding: 10px 30px;
    margin: 5px;
    transform: skewX(-59deg);
    background-color: yellow;
}
.btn a {
    transform: skewX(59deg);
    display: inline-block;
}

<div class="wrapper">
  <div class="btn btn-one">
        <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
        <a href="#">BTN TWO</a>
  </div>
</div>