<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #3c5d6e;
border-radius: 6px;
outline: none;
transition: 0.3s;
border: 2px solid transparent;
}
.button:hover,
.button:focus {
background-color: #c2c7c7;
border-color: #7aa8b7;
}
</style>
</head>
<body>
<a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html" aria-label="Learn about the HTML button tag"><span>HTML button tag</span></a>
</body>
</html>