Что сделать с кнопками, которые прыгают при hover'е?

Question

[Trow_eu]

Добрый день,
есть у меня такая панелька (и пару других кнопок), которые по дизайну чуть сдвигаются при ховере. Если навести курсор на ту часть кнопки, из которой она убегает, то при ховере она оказывается уже не под курсором и возвращается назад. и так по кругу )

codepen.io/trow/pen/nyaDs
расстояние увеличил, чтобы было легче попасть в нужную область - левый край кнопок. При нужных нескольких px можно просто забить на это, но интересуют варианты что с ними можно сделать.

Есть мысли увеличивать блок, вместо сдвига, но как тогда сдвинуть, а не увеличить бэкграунд?

Answer 1

[Александр Хиренко]

Если я правильно понял, в чем проблема то вместо:
margin-left: 10px;
используйте что-то вроде:
border-left:#FFF 10px solid;
в :hover

Comments

[Александр Цымбал]

О! отличный вариант. только если фон однотонный. а так вообще можно вместо #fff использовать transparent или rgba(0,0,0,0);

[Александр Хиренко]

@AlexanderTsymbal согласен, но это уже по надобности, думаю, автор дальше разберется :)

[Trow_eu]

Подойдет, спасибо )

[Trow_eu]

не, поспешил. с прозрачным бордером блок увеличивается и идет заливка цветом бекграунда. так что решение только для однотонного фона.

[Александр Хиренко]

@Trow_eu а Вам такой вариант не подходит?

[Trow_eu]

@Satanpit для этой панельки подходит, для другой кнопки - нет, но там она одна и можно использовать вариант Александра.
а вообще хочется найти хорошее решение на подобные случаи )
Поставленный вопрос решение удовлетворило полностью, я же не уточнил про фон =)

[Trow_eu]

@Satanpit но если есть идеи - поделитесь)

[Александр Хиренко]

@Trow_eu ну еще можно :hover не на a ставить, а на li и там уже
padding-left:10px;

[Trow_eu]

@Satanpit годно! спасибо

Answer 2

[Александр Цымбал]

codepen.io/anon/pen/piHKn - может быть так?

Comments

[Trow_eu]

вариант, но лишнего много ) думал так сделать до того, как спросить решил
а вот прозрачный бордер в дополнении к ответу Satanpit - то, что надо )