Как сделать подобную кнопку с закругленными краями при ховере без overflow?

Question

[Worddoc]

Привет.

Передо мной встала задача сделать подобную кнопку. Я сделал, применил overflow: hidden и это дало дефект - на фоне белого цвета по краям заметны артефакты родного цвета кнопки. Теперь я не пойму, как сделать подобную кнопку, но без overflow, при условии, что края всегда должны быть округлены, а псевдоэлемент даже при width: 0% должен иметь нужное округление, как у кнопки. Если описать это коротко - нужно сделать overflow: hidden без использования подобного свойства. Буду сильно благодарен за помощь! Спасибо.

https://codepen.io/anon/pen/eMmZpo

Comments

[twobomb]

Возможно просто добавить 1 строчку, закругление при ховер?

[Worddoc]

twobomb, какую строчку? Проблема в том, что когда элемент при ховере набирает ширину или наоборот, то видно, как закругление меняет форму и на 0% блок квадратный

[twobomb]

Worddoc, Ну значит добавьте overflow hidden и всё

[Worddoc]

twobomb, Так в этом то и вопрос, как сделать это без Overflow:hidden, так как дает артефакты

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/dmPXEa

Comments

[Worddoc]

А если нужно, чтобы при ховере элемент приходил вправо, и уходил вправо?

[Андрей Федоров]

Worddoc, https://codepen.io/aliencash/pen/vREXrN несколько грязновато правда...

[Worddoc]

Андрей Федоров, Спасибо