<button class="left">BUTTON</button>
<button class="up">BUTTON</button>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  position: relative;
  padding: 20px 20px;
  margin:20px;
  font-size: 25px;
  font-weight: bold;
  font-family: Tahoma, sans-serif;
  box-shadow:7px 7px rgba(0,0,0,0.5);
  transition: .3s ease;
  overflow: hidden;
  cursor: pointer;
}

button:hover {
  transform: translateY(7px) translateX(7px);
  box-shadow: 0 0 rgba(0,0,0,0.5); 
}

.left {
  position: relative;
  border: 10px solid #2ec4b6;
  z-index:1;
}

.left:hover {
  color: white;
}

.left:hover:before {
  width:100%;
}

.left:before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
  height:100%;
  width:0;
  background-color: #2ec4b6;
  transition: .3s width ease;
}

.up {
  position: relative;
  border: 10px solid #f94144;
  z-index:1;
}

.up:hover {
  color: white;
}

.up:before {
  content:"";
  position: absolute;
  z-index:-1;
  background-color: #f94144;
  width:100%;
  height:0;
  top:0;
  left:0;
  transition: height .3s ease;
}

.up:hover:before {
  height: 100%;
}

@media only screen and (max-width: 600px) {
  button {
    font-size:10px;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.