2.9 Cursor and UI

Introduction

CSS allows customizing the user interface and the mouse cursor. `cursor` changes the pointer icon. `transition` creates smooth animations on state changes. Pseudo-classes like `:hover`, `:active`, `:focus`, `:checked`, and `:disabled` allow styling elements according to their state.

button {
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: blue;
}

button:active {
    background-color: darkblue;
}

input:focus {
    outline: 2px solid orange;
}

input:checked {
    background-color: green;
}

input:disabled {
    background-color: gray;
}

2.9 Cursor and UI

Introduction

CSS allows customizing the user interface and the mouse cursor. cursor changes the pointer icon. transition creates smooth animations on state changes. Pseudo-classes like :hover, :active, :focus, :checked, and :disabled allow styling elements according to their state.

Introduction

CSS allows customizing the user interface and the mouse cursor. `cursor` changes the pointer icon. `transition` creates smooth animations on state changes. Pseudo-classes like `:hover`, `:active`, `:focus`, `:checked`, and `:disabled` allow styling elements according to their state.