Как сделать этот эффект при наведении на кнопку?

Question

[Vitaly Max]

Здравствуйте все! Есть такая кнопка


Слева вариант без наведения, а справа с hover эффектом: получается должно произойти плавное заполнение цветом этой кнопки, подтолкните к мысли, как это реализовать?

Comments

[Antonosyan]

С помощью псевдо-элемента ::after

Answer 1

[WapSter]

Псевдоэлемент на ссылке, с высотой 100% с шириной какую вам нужно, при Ховер увеличивать ширину
upd псевдоэлемент относительно позиционированный

Answer 2

[kshkld7ck]

Comments

[Vitaly Max]

круто! но кнопка должна оставаться круглой))

[kshkld7ck]

RaggaMaffin, поиграйтесь с border-radius у div:hover:before, например 34рх

[Alex]

RaggaMaffin,установите радиус в 25px во всех местах и будет счастье

[Vitaly Max]

kshkld7ck, Alex, спасибо за участие!

[Максим]

kshkld7ck, а так криво - со смещением задуманно так ?

[Vitaly Max]

Alex, радиус 50px смотрится даже лучше

[kshkld7ck]

Максим Ленский, ну мой браузер корректно отобразил) предполагаю, что у Вас не хром)

[Максим]

kshkld7ck, вообще хром ...

[kshkld7ck]

Максим Ленский, Магия, не более)