CSS увеличить зону действия кнопки не изменяя размер?

Question

[GeKskill]

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

<div class="product-wrapper">
	<div class="action-btn cross-icon"><a href="#" rel="nofollow noopener"></a></div>
</div>
<style>
.product-wrapper {
position: relative;
}
.cross-icon {
position: absolute;
    top: -5px;
    right: -15px;
    width: 25px;
    height: 25px;
    background-color: #e6e6e6;
    border-radius: 50%;
    z-index: 99;
    justify-content: center;
}

.cross-icon>a:before {
    font-size: 10px;
    content: "\f112";
    font-family: "icomoon";
}
</style>

Answer 1

[Сергей delphinpro]

Зеленую рамку оставил для демонстрации области клика. Сделайте ее прозрачной. Фактически кнопка будет большого размера, но визуально - маленькой.

Answer 2

[Павел]

Вообще нужен код.
Кнопку в абсолют - и задайте ширину и высоту какую нужно, а изображение крестика (или шрифта, или еще там чего....), например, оставить размером с дизайна.