Как убрать смещения иконки при увеличении кнопки?

Question

[parnasmi]

Всем привет. Нужен помощь. Есть карточка товара. При наведении появляется различные кнопки с эффектом увеличения. Но, при этом иконка внутри кнопки смещаются направо на пару пикселов. Как победить этот глюк? Заранее спасибо. Ссылка на пример

Answer 1

[Игорь Забродин]

Так как у иконки уже абсолютное позиционирование, то отцентрировать ее с помощью transform и координат top и left, а у кнопки поставить размеры в чётных числах:

.act-btn_circ .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.act-btn_circ {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.15);
    padding: 0;
}

Comments

[parnasmi]

Спасибо. Точно. Помогли