设置禁用样式的填充时，按钮会丢失点击的动画

Question

我有一套vaadin按钮样式

.custom-add-item, .custom-add-item:hover,
.custom-delete-item, .custom-delete-item:hover {
    margin:0;
    padding:0;
    border: 0;
    cursor:pointer;
    background-image:none;
    background-color: transparent !important;
    border: none !important;
}

.v-button .v-button-wrap .v-button-caption{
    text-shadow: none !important;
}

.v-button .v-button-wrap .v-button-caption:hover{
    color:#000 !important;
}

.custom-add-item .v-button-wrap,
.custom-delete-item .v-button-wrap {
    margin:0;
    padding:0;
}

%new-add-delete-button {
    margin:0;
    padding:0;
    display:block !important;
    background-image:url("img/button_add_item.png");
    background-position: -7px -1px;
    background-repeat: no-repeat;
    height:22px;
    text-align:right;
    text-indent:12px;
    line-height:22px;
    font-weight:bold;
    text-decoration:underline;
    color: #000000 !important;
}

.custom-add-item .v-button-wrap .v-button-caption,
.custom-delete-item .v-button-wrap .v-button-caption {
    @extend %new-add-delete-button;
}

.custom-delete-item .v-button-caption {
    background-image:url("img/button_delete_item.png") !important;
    background-position: -7px -3px !important;
    background-repeat: no-repeat;
}
.custom-add-item .v-button-caption:hover {
    background-position: -7px -45px;
    color:#000 !important;
}

.custom-delete-item .v-button-caption:hover{
    background-position: -7px -47px !important;
    color:#000;
}

在页面上看起来像这样

  | +add element
-------------
  | +add element

禁用该按钮后，它会向右移动

  | +add element
------------
  |   +add element

为了修复它，我试图这样做

.v-disabled.custom-add-item, .v-disabled.custom-add-item:hover {
   .v-button-wrap { padding: 0; }
}

它将偏移量固定在右侧，但是消除了单击的效果-当按钮稍微向右移动然后返回到原始位置时。

出什么问题了？