State class generation (hover, active, disabled) in SASS - Browser Rendering Trace

Render Flow - State class generation (hover, active, disabled)

Write base button styles

↓

Define state classes: hover, active, disabled

↓

SASS compiles nested selectors

↓

Generate CSS with :hover, :active, .disabled

↓

Browser applies styles on user interaction

The SASS code defines base styles and nested state classes. When compiled, it creates CSS selectors for hover, active, and disabled states. The browser applies these styles dynamically as the user interacts.

Render Steps - 4 Steps

Code Added:.btn { background-color: #007BFF; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; }

Before

[ ]
(empty page, no buttons)

→

After

[ Button ]
[ Click me ]
(background blue, white text, rounded corners, pointer cursor)

The base button appears with blue background and white text, shaped with padding and rounded corners. Cursor changes to pointer on hover area.

🔧 Browser Action:Creates button box with base styles, triggers layout and paint

Code Sample

Two buttons: one normal with hover and active color changes, one disabled with gray color and no pointer cursor.

SASS

<button class="btn">Click me</button>
<button class="btn disabled" disabled>Disabled</button>

SASS

.btn {
  background-color: #007BFF;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #0056b3;
  }

  &:active {
    background-color: #004085;
  }

  &.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
  }
}

Render Quiz - 3 Questions

After applying step 2, what visual change happens when you move the mouse over the button?

A The button disappears

B The button text color changes to black

C The button background changes to a darker blue

D The button border appears

Common Confusions - 3 Topics

Why doesn't the disabled button change color on hover?

Because the disabled class sets a gray background and cursor not-allowed, and the hover styles do not apply to elements with the disabled class. The browser ignores hover styles on disabled buttons.

💡 Disabled buttons override hover styles and show gray with no pointer cursor.

Why does the cursor still show pointer on the normal button but not on disabled?

The base button sets cursor to pointer, but the disabled class changes it to not-allowed to visually show it cannot be clicked.

💡 Cursor style changes help users know if a button is clickable or not.

Why does the active background color only show while clicking?

The :active pseudo-class applies only during the mouse click or keyboard press, so the background changes only while the button is pressed.

💡 Active styles give immediate feedback during pressing.

Property Reference

Property	Value Applied	Visual Effect	Common Use
background-color	#007BFF	Blue background for normal button	Base button color
background-color	#0056b3	Darker blue on hover	Hover feedback
background-color	#004085	Even darker blue on active (click)	Click feedback
background-color	#6c757d	Gray background for disabled	Disabled state
cursor	pointer	Pointer cursor on hover	Indicates clickable
cursor	not-allowed	Not-allowed cursor on disabled	Indicates disabled
opacity	0.65	Faded look for disabled	Visual disabled cue

Concept Snapshot

State class generation uses nested SASS selectors for hover, active, and disabled states. Hover changes background color on mouse over. Active changes background color while clicking. Disabled applies gray color, faded look, and disables pointer cursor. These states give clear visual feedback for user interaction.