Simple CSS Button hover effect

CSS Code

Fill Up

        
/* button styling */
button {
  padding: 10px 20px;
  background: #f8f3ff;
  color: #2D0367;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2em;
  border: 2px solid #2D0367;
  transition: 0.25s;
}
button:hover, button:focus {
  outline: none;
}

/* hover effects */
.fill-up:hover, .fill-up:focus {
  color: #f8f3ff;
  box-shadow: inset 0 -3em 0 0 #2D0367;
}
        
      

Fill In

        
/* button styling */
button {
  padding: 10px 20px;
  background: #f8f3ff;
  color: #2D0367;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2em;
  border: 2px solid #2D0367;
  transition: 0.25s;
}
button:hover, button:focus {
  outline: none;
}

/* hover effects */
.fill-in:hover, .fill-in:focus {
  box-shadow: inset 0 0 0 2em #00B0B8;
  border-color: #00B0B8;
  color: #f8f3ff;
}
        
      

Neumorphism

        
/* button styling */
button {
  padding: 10px 20px;
  background: #f8f3ff;
  color: #2D0367;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2em;
  border: 2px solid #2D0367;
  transition: 0.25s;
}
button:hover, button:focus {
  outline: none;
}

/* hover effects */
.neumorphism {
  border: 0;
  border-radius: 5px;
}
.neumorphism:hover, .neumorphism:focus {
  color: #00B0B8;
  transform: translate(0, -5px);
  box-shadow: -5px -5px 15px #FFFFFF, 5px 5px 15px #ede0ff;
}
        
      

Raise

        
/* button styling */
button {
  padding: 10px 20px;
  background: #f8f3ff;
  color: #2D0367;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2em;
  border: 2px solid #2D0367;
  transition: 0.25s;
}
button:hover, button:focus {
  outline: none;
}

/* hover effects */
.raise:hover, .raise:focus {
  transform: translateY(-0.25em);
  box-shadow: 0 0.5em 0.5em -0.4em #00B0B8;
  border-color: #00B0B8;
  color: #00B0B8;
}
        
      

Slide

        
/* button styling */
button {
  padding: 10px 20px;
  background: #f8f3ff;
  color: #2D0367;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2em;
  border: 2px solid #2D0367;
  transition: 0.25s;
}
button:hover, button:focus {
  outline: none;
}

/* hover effects */
.slide:hover, .slide:focus {
  box-shadow: inset 6.5em 0 0 0 #00B0B8;
  border-color: #00B0B8;
  color: #f8f3ff;
}