CSS User Interface

Essential UI Properties

cursor: pointer;

user-select: none;

outline: 2px solid blue;

touch-action: manipulation;

🔹 Cursor Property

The CSS cursor property changes the mouse pointer when hovering over elements, providing interactive cues. Common values include pointer for clickable items, not-allowed for disabled elements, grab for draggable interfaces, and text for selectable content. Custom cursor images can also be defined via URL. Proper cursor usage improves UX by indicating functionality, enhancing accessibility, and guiding user interactions across buttons, links, forms, and drag-and-drop components.

/* Different cursor types */
.pointer { cursor: pointer; }
.help { cursor: help; }
.wait { cursor: wait; }
.text { cursor: text; }
.grab { cursor: grab; }
.not-allowed { cursor: not-allowed; }

<div class="pointer">Pointer cursor</div>
<div class="help">Help cursor</div>
<div class="wait">Wait cursor</div>
<div class="text">Text cursor</div>
<div class="grab">Grab cursor</div>
<div class="not-allowed">Not allowed cursor</div>

🔹 User Select Property

The user-select CSS property controls whether text can be highlighted by the user. Values include none (prevents selection), text (allows selection), all (selects entire element content on click), and auto (browser default). This is useful for UI elements like buttons, icons, or interactive widgets where text selection is undesirable, or for enhancing UX in drag-and-drop interfaces. Always ensure that disabling selection doesn’t hinder accessibility or content consumption.

/* User select options */
.selectable { user-select: text; }
.non-selectable { user-select: none; }
.select-all { user-select: all; }

<p class="selectable">This text can be selected normally</p>
<p class="non-selectable">This text cannot be selected</p>
<p class="select-all">Click to select all this text</p>

🔹 Outline and Focus

Customizing focus outlines is crucial for accessibility and keyboard navigation. Replace the default browser outline with visible, high-contrast styles using outline, box-shadow, or border properties. For example, focus-visible provides focus only when needed (keyboard). Ensuring focus indicators meet WCAG contrast ratios helps users with motor or visual impairments. Never remove outlines entirely—style them to fit your design while maintaining clear visibility for all interactive elements.

/* Custom focus styles */
.custom-focus:focus {
    outline: 3px solid #007cba;
    outline-offset: 2px;
}

.no-outline:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.3);
}

<button class="custom-focus">Custom Focus</button>
<button class="no-outline">Box Shadow Focus</button>

🔹 Interactive Button Example

Interactive button implementations demonstrate CSS pseudo-classes including :hover, :focus, and :active creating visual feedback states. These states provide essential user experience affordances indicating interactive availability and activation status. Implementation combines transition animations with appropriate timing functions for smooth state changes. Accessible buttons include proper ARIA attributes and keyboard navigation support, ensuring universal usability that positively impacts engagement metrics.

/* Modern button styling */
.modern-button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    outline: none;
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.modern-button:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

.modern-button:active {
    transform: translateY(0);
}

<button class="modern-button">Click Me!</button>