css кнопка и ссылка медленно меняются при наведении указателя мыши

Question

У меня огромный проект, и я не могу найти то, что делает медленный переход.

В принципе, я хочу именно это как следующий фрагмент.

но в проекте эти переходы происходят очень медленно. Любые идеи почему? есть ли тег css, который мне не хватает?

.checkout-options { 
 
    margin: 100px; 
 
    text-align: center; 
 
} 
 
label.checkout-btn { 
 
    padding: 20px; 
 
} 
 
label.checkout-btn a { 
 
    color: #fff; 
 
    padding: 20px; 
 
    background-color: #36526D; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    text-decoration: none; 
 
} 
 
label.checkout-btn a:hover, 
 
label.checkout-btn a:focus { 
 
    color: #fff; 
 
    background-color: #195a96; 
 
    text-decoration: none; 
 
    padding: 23px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkout-options"> 
 
    <div class="checkout-options--noregister"> 
 
    <label class="checkout-btn"><a href="#!/shipping">Buy</a> 
 
    </label> 
 
    </div> 
 
</div>

Answer 1

Вы можете попробовать добавить: перехода: 0s; к вашему css. Чтобы убедиться, что это имеет значение. См. Фрагмент.

.checkout-options { 
 
    margin: 100px; 
 
    text-align: center; 
 
} 
 
label.checkout-btn { 
 
    padding: 20px; 
 
} 
 
label.checkout-btn a { 
 
    color: #fff; 
 
    padding: 20px; 
 
    background-color: #36526D; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    text-decoration: none; 
 
} 
 
label.checkout-btn a:hover, 
 
label.checkout-btn a:focus { 
 
    color: #fff; 
 
    background-color: #195a96; 
 
    text-decoration: none; 
 
    padding: 23px; 
 
    transition: 0s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkout-options"> 
 
    <div class="checkout-options--noregister"> 
 
    <label class="checkout-btn"><a href="#!/shipping">Buy</a> 
 
    </label> 
 
    </div> 
 
</div>