<main>
  <div class="wrapper">
    <div class="flow">
      <a href="#" class="my-button">A link that looks like a button</a>
      <article class="flow">
        <p>
          Here is some content in an article. The <a href="#">link style</a> of the button will
          inherit from this article’s CSS.
        </p>
        <p><a href="#" class="my-button">A link that looks like a button</a></p>
      </article>
    </div>
  </div>
</main>
.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: #eabdb3;
  font: inherit;
  text-align: center;
}

/* The button will inherit this style */
article a {
  color: #7c3626;
}

.my-button:hover {
  background: #e2a294;
}

External CSS

  1. https://codepen.io/web-dot-dev/pen/gOgYqvz.css

External JavaScript

This Pen doesn't use any external JavaScript resources.