CSS Button Fill Effect on Hover

Demo:

To create the CSS Button Fill Effect on Hover follow the steps below:

1. Add HTML
2. Add CSS

Step1.

Add HTML

<button class="left">BUTTON</button>
<button class="up">BUTTON</button>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the buttons:

button {
  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;
}
.left {
  position: relative;
  border: 10px solid #2ec4b6;
  z-index:1;
}
.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:before {
  content:"";
  position: absolute;
  z-index:-1;
  background-color: #f94144;
  width:100%;
  height:0;
  top:0;
  left:0;
  transition: height .3s ease;
}

Add transitions on hover:

button:hover {
  transform: translateY(7px) translateX(7px);
  box-shadow: 0 0 rgba(0,0,0,0.5); 
}
.left:hover {
  color: white;
}
.left:hover:before {
  width:100%;
}
.up:hover {
  color: white;
}
.up:hover:before {
  height: 100%;
}

Enjoy coding!

Read also:

CSS Neon Button/ Neon Effect

Scroll To Top Button (smooth scroll effect)

CSS Shiny Button