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

1 vote233 views2 answers
Pure css spinner
CSS
168 votes331 views4 answers
Css link tag
CSS
98 votes258 views6 answers
Css center
CSS
20 votes279 views6 answers
Gradient background image
CSS
43 votes271 views6 answers
Css change background color
CSS
0 vote279 views1 answer
Odoo search
CSS
2 votes283 views1 answer
How to fix the footer at the bottom of the page
CSS
1 vote286 views1 answer
Css put span on new line
CSS
1 vote278 views1 answer
Css vw scrollbar
CSS
1 vote301 views1 answer
Css scrollbar always visible
CSS