<html>
   <head>
  </head>
  <body>
      <div class="variation-a">
        <button class="suit_and_tie">submit</button>
      </div>
      <div class="variation-b">
        <button class="suit_and_tie">submit</button>
      </div>
  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
}

.suit_and_tie {
  /* font */
  color: black;
  font-size: 20px;
  font-family: helvetica;
  
  /* remove blue underline */
  text-decoration: none;
  
  /* border */
  border: 2px solid black;
  border-radius: 20px;
  
  /* transitions */
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
  
  /* other */
  background-color: white;
  padding: 4px 30px;
}

.suit_and_tie:hover {
  /* update text color and background color */
  color:white;
  background-color:black;
  
   /* transitions */
  transition-duration: .2s;
  -webkit-transition-duration: .11s;
  -moz-transition-duration: .2s;
}

.variation-a,
.variation-b {
  display: inline-block;
  height: 100px;
  width: 100%;
  text-align: center;
  padding-top: 50px;
}

.variation-b {
  background-color: black;
}

.variation-b .suit_and_tie {
  /* font */
  color: white;
  
  /* border */
  border: 2px solid white;
  
  /* other */
  background-color: black;
}

.variation-b .suit_and_tie:hover {
  /* font */
  color: black;
  
  /* border */
  border: 2px solid black;
  
  /* other */
  background-color: white;
}

button.suit_and_tie {
  -webkit-appearance: none;
  -moz-appearance: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.