Button:hover

by Vladimir

HTML

<button>
CLick
</button>
<button class="invert">
CLick
</button>

CSS

button {
  box-shadow: inset 0 0 50px 50px #f00;
  background: #fff;
  color: #fff;
  border-radius: 0;
  width: 100px;
  height: 50px;
  font-size: 20px;
  text-transform: uppercase;
  border: 1px solid #f00;
  transition: all 200ms;
}
button:hover {
  box-shadow: inset 0 0 0px 0px #f00;
  color: #000;
  transition: all 200ms;
}
.invert {
  box-shadow: inset 0 0 0px 0px #f00;
  color: #000;
  transition: all 200ms;
}
.invert:hover {
  box-shadow: inset 0 0 50px 50px #f00;
  color: #fff;
  transition: all 200ms;
}