Button slanted slide on hover

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  transition: color .5s;
  overflow:hidden;
}
div:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 130%; height: 100%;
  background: #B17461;
  z-index: -1;
  transform-origin:0 0 ;
  transform:translateX(-100%) skewX(-45deg);
  transition: transform .5s;
}
div:hover {
  color: #fff;
}
div:hover:before {
  transform: translateX(0) skewX(-45deg);
}

Source: stackoverflow.com

Similar codes

20 votes189 views6 answers
Fonts for css
CSS
7 votes190 views1 answer
Dashed css
CSS
0 vote206 views1 answer
Enlarge ionicons css
CSS
0 vote209 views2 answers
Easyui datagrid header field color
CSS
3 votes211 views4 answers
How to remove border on button click
CSS
0 vote210 views1 answer
Text zentrieren
CSS
0 vote198 views3 answers
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
CSS
17 votes216 views4 answers
Li remove dot css
CSS
2 votes212 views1 answer
How to add a black border around text css
CSS
0 vote226 views1 answer
Avoid side scrolling css
CSS