Нужно соединить два объекта в css

В общем, я создал кнопку и отдельно от неё стрелку. Стрелка имеет ховер поворота вправо и изменение прозрачности с 0% до 100%. Хочу, чтобы при наведении на кнопку срабатывал эффект ховера стрелки. Код ниже.

.button {
   display: inline-block;

   box-sizing: border-box;
   padding: 10px;

   cursor: pointer;
   border: none;
   border-radius: 5px;

   font-size: 14px;
}

.arrow {
   display: inline-block;

   margin-left: 10px;

   opacity: .0;
   transition: 1s;
}

.right {
   transform: rotate(-90deg);
   transition: all 0.2s;
}

.right:hover {
   transform: rotate(0deg);
   transition: all 0.4s;
   opacity: 1;
}