Cascading Style Sheets/Interactivity

Elements can be made interactive by using hover effects, transitions and animations.

Hover effects

Elements can have a different effect (i.e. changing background, size, applying shadows).

Examples

Changing colors

#css-button1 {
    background: #6c9;
}
#css-button1:hover {
    background: #4a7;
}

A button

Changing size

#css-button2 {
    transform: scale(1);
}
#css-button2:hover {
    transform: scale(1.2);
}

Another button