在特殊元素上应用transform属性

Question

我有一个带有通知气泡的按钮。我在此按钮上应用了悬停属性以放大按钮。问题是按钮上的通知也被转换，它在按钮和通知之间造成了很小的空间。 如何在我的按钮和我的通知之间进行统一转换？我知道通知的位置以像素为单位，也许这就是问题的根源。

这是我的代码：

    .notify-badge{
     position: absolute;
     background-color: #3bb2bc !important;
     height: 25px;
     width: 25px;
     right: 40px;
     bottom: 40px;
     text-align: center;
     line-height: 25px;
     border-radius: 50%;
     color: white;
     border:1px solid #3bb2bc;
    }

    a {
     background: white;
     padding: 15px;
     padding-top: 11px;
     border: 0;
     border-radius: 50%;
     height: 50px;
     width: 50px;
     margin-left: 30px;
    }

    a:hover{
     transform: scale(1.1);
     transition: all 0.25s ease-out;
    }

    <a class="button">
     <img src="images.png"/>
     <span class="notify-badge">2</span>
    </a>