Test Button Link

Plain HTML & CSS

HTML

<div class="test">
  <h3>This is a test</h3>
  <p><a href="https://example.com" title="Example.com" class="test-button">Button Text</a></p>
</div>

CSS

.test {
  width: 50vw;
  border-radius: 10px;
  background: #53646f;
  color: #FFF;
  margin: auto;
  padding: 2%;
  text-align: center;
  font-size: calc(18px + 1.5vw) /**Scale text on all screen sizes**/;
  font-family: Arial Black, Arial Bold, Gadget, sans-serif;
  text-rendering: optimizeLegibility;
}

.test h3 {
  text-transform: uppercase;
}

.test-button {
  text-decoration: none;
  background: #f6851d;
  color: #EEE;
  padding: 3%;
  border: 2px solid #f6851d;
  border-radius: 10px;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}

.test-button:hover,
.test-button:active,
.test-button:focus {
  color: #FFF;
  border: 2px solid orange;
}