<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;
}
This Pen doesn't use any external JavaScript resources.