Как сделать такую кнопку?

Question

[Dima]

Каким образом реализовать заполнение в кнопке при наведении?

Answer 1

[GreatRash]

tympanus.net/Development/CreativeButtons

Answer 2

[Иван Сергеев]

Как вариант:
Cделать 1px на 1px изображение, поставить на фон, и при наведении менять background-size:

.btn{
   background: url(img.png) no-repeat left 50%;
   background-size:0% 100%
   transition: 0.5s;
}
.btn:hover{
   background-size:100% 100%
   transition: 0.5s;
}

Comments

[Николай]

серьёзно? в 2016?

[Иван Сергеев]

Николай: почему нет? можно воспользоваться псевдо-элементами, как в кнопках в ответе GreatRash.
Чем этот способ лучше или хуже?)