Button Background Grow

I was inspired by the buttons at the top of the toolbar in Google that have a transparent background, but get a slightly gray background on hover that grows from the cetner.

Like this:

You need to give the button the class .g-butt if you’re going to use the code below, and make sure the button has no background color (even on hover).

.g-butt{
  position: relative;
  z-index: 2;
}


.g-butt.gb-button:before{
  content:'';
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  z-index: -1;
  opacity: .4;
  transform: scale(0);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}
	
.g-butt.gb-button:hover:before{
  content:'';
  position: absolute;
  background-color: #f6f7f8;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  z-index: -1;
  opacity: 1;
  transform: scale(1);
}