<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;
}
This Pen doesn't use any external JavaScript resources.