Перетворення та переходи

Для загального вигляду на сторінці
div{                                       /*якщо в div оформити блок посилання з картинкою
   display: inline-block;
   margin: 0 10px 10px 10px;
   }
img{
    height: 250px;
    width: 250px;
    border: 3px solid #666;
    background-color: #FFF;
    box-shadow: 2px 2px 4px rgba(0,0,0,.5);
   }

Для ефектів перетворення та переходу
.<назва класу> a  img:hover{
    transform: scale(1.5); }

.<назва класу>  img:active {
  transform: translate(1px,2px);}

Приклад

Є кнопка, колір фону і тексту якої треба змінити, а потім неочікованно змінити колір її границі після завершення змінення попередніх властивостей.

.navButton {
color: black;
background-color: #FF6603;
border: 5px solid #660034;
transition-property: color, background-color, border-color;
transition-duration: 1s, 1s, .5s;
transition-delay: 0, 0, 1s;
}
.navButton:hover {
color: white;
background-color: #660034;
border-color: #FF6603;
}