html - Css : Scale background color of a div -
i have div , want have background-color of div scaling after hover did following: 
li {    background-size:  0 0;   transition: background-size 2s ease-in;   -moz-transition: background-size 2s ease-in;   -web-kit-transition: background-size 2s ease-in } li:hover {   background-size:  100% 100%;   background-color: rgba(0, 0, 0, 0.1); } i want achieve similar effect toolbars buttons hover on website: http://www.materialup.com/posts/material-admin
you need add :before element through css desired result.
li {   width: 40px;   height: 40px;   float: left;   margin-right: 5px;   background: white; }  li:before {   content: " ";   transition: 255ms ease-in;   -moz-transition: 255ms ease-in;   -webkit-transition: 255ms ease-in;   transform: scale3d(0, 0, 0);   -webkit-transform: scale3d(0, 0, 0);   width: 40px;   height: 40px;   float: left;   background-color: rgba(0, 0, 0, 0.1);   opacity: 1; }  li:hover:before {   transform: scale3d(1, 1, 1);   opacity: 1; }