<div>
  <button><span>FADE OUT</span></button>
  <button><span>FADE OUT</span></button>
  <button><span>FADE OUT</span></button>
</div>
body {
  overflow: hidden;
}
*:focus{
  outline:0;
}
div {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
}
button {
  position: relative;
  margin: 0 3vw;
  width:16vw;
  height:8vw;
  line-height: 8vw;
  background:transparent;
  border: 0;
}
button span {
  position:absolute;
  display: block;
  color: #333;
  font-size:2.5vw;
  font-weight: bold;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  width: 18vw;
  height:9vw;
  line-height: 9vw;
  background: #ccc;
  border-radius: 2vw;
  border: 2px solid #333;
  opacity:1;
  transition: .5s;
}
button span:hover {
  opacity:0;
  transform: scale(1.5);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.