Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      margin:0;
     }
     button {
      padding:15px;
      margin:1px;
      font-size:2em;
      cursor:pointer;
      background:black;
      display:inline-block;
     }
      
    a { 
     text-decoration:none;
     color:Gold;
     width:100%;
     display:inline-block;
    }
      
    button:hover { 
     background:royalblue;
     color:black;
    }
   @media all and (max-width:540px) {
      button {
       width:100%;
      }
    }
    </style>
  </head>
  <body>
    <button><a href="#">Home</a></button>
    <button><a href="#">Contact</a></button>
    <button><a href="#">Blog</a></button>
    <button><a href="#">About Us</a></button>
​
  </body>
</html>
​