<nav>
  <a href="#" class="button">Button 1</a>
  <a href="#" class="button">Button 2 longer text</a>
  <a href="#" class="button">Button 3</a>
  <a href="#" class="button">Button 4</a>
</nav>


<nav>
  <button class="button">Button 1</button>
  <button class="button">Button 2 longer text</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
</nav>
  
html,
body {
  margin: 0;
  padding: 0;
}
nav {
  padding: 10px 0;
  background: #666;
  text-align: center;
}
.button {
  -webkit-appearance:none;/* not really needed*/
  -moz-appearance:none;/* not really needed*/
  appearance:none;/* not really needed*/
  display: inline-block;
  color:blue;
  font-size:1rem;
  font-family:Arial;
  text-align: center;
  /*min-width: 250px;*/
  margin: 5px 20px;
  border-radius: 6px;
  border: 1px solid #fff;
  background: red;
  padding: 10px 15px 9px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  transition: background 1s ease;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 1px #fff;
  line-height:2;
  cursor:pointer;
  box-sizing:border-box;
 }
.button:hover,
.button:focus {
  background: #000;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.