Не могу понять проблему в моем css коде, поможете исправить?

Question

[Janserik-Bay]

Не работают transition на мой top, долго ломал голову но так и не мог решать этот проблему. transtion хорошо работают на другие свойства, а вот top не хочет плавно меняться. И да, я начинающий. Вот мой код:

<div class="box">
     <div class="button">Нажмите меня</div>
</div>

и css

.box {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
 }
 
.button {
   border: 1px solid #000;
   background-color: blue;
   color: white;
   text-decoration: none;
   text-align: center;
   padding: 10px 40px;
   border-radius: 4px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 18px;
   box-shadow: 0 5px 0 black;
   position: relative;
   cursor: pointer;

   /* transtion */
   transition-property: top;
   transition-duration: 15s;
 }

.button:hover {
   box-shadow: 0 3px 0 black;
   background: indigo;
   top: 6px;
}

Comments

[Антон Литвиненко]

Я могу ошибаться но может транщишн:позишн?

Answer 1

[Михаил]

Ему не с чего меняться

.button {
  top: 0;
  transition...
}