Это простой эффект, но вы можете создать его с помощью линий, которые можно эффективно зачаровать. Который можно задействовать под различные функций, это для перехода по ссылки или открытие элемента, здесь вам решать, так как главным считаю, это сам эффект.
1.
2.
HTML
Код
<button>Кнопка с простым эффектом</button>
CSS
Код
button{
background:#1AAB8A;
color:#fff;
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#fff;
color:#1AAB8A;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #1AAB8A;
transition:400ms ease all;
}
button:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
Демонстрация
