<html>
  <head>
  </head>
  
  <body>
    <button class="color-change">button</button>
  </body>
  
</html>
body {
  padding-top: 60px;
  font-family: 'Roboto';
  text-align: center;
}

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

button.color-change {
  -webkit-appearance: none;
  -moz-appearance: none;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,100

External JavaScript

This Pen doesn't use any external JavaScript resources.