Riechst, представлено 3 эффекта на кнопки, если говорить про первый, то вот код и стили под него, основа для всех одинакова, а эффект у каждого свой.
Код
Код
<button class="bexceptionak-lydexciting"><span>Оригинальный дизайн</span></button>
CSS
Код
.bexceptionak-lydexciting {
border: 1.8px solid #a79f9f;
background: #f5f0f0;
display: inline-block;
padding: 15px 23px;
margin: 10px;
font: normal 18px 'Lato', sans-serif;
border-radius: 35px;
cursor: pointer;
position: relative;
outline: none;
text-decoration: none;
color: #464343;
overflow: hidden;
z-index: 100;
transition: all .4s;
box-shadow: 0px 4px 10px rgba(45, 41, 41, 0.19), 0px 10px 30px -15px rgba(43, 41, 41, 0.15);
}
.bexceptionak-lydexciting > span{
position: relative;
display: block;
z-index: 100;
}
.bexceptionak-lydexciting:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #8e1183;
top: 0;
left: 0;
-webkit-transform: skew(-10deg) translate3d(-103%,0,0);
transform: skew(-10deg) translate3d(-103%,0,0);
border-right: 1px solid #8e1188;
transition: all .5s;
}
.bexceptionak-lydexciting:hover {
color: #f9f3f3;
background: #bc31aa;
}
.bexceptionak-lydexciting:hover:before{
-webkit-transform: skew(-10deg) translate3d(-50%,0,0);
transform: skew(-10deg) translate3d(-50%,0,0);
}
Демонстрация
