Modern browsers are starting to support native CSS nesting, bringing a feature that was once only available in preprocessors like Sass directly into standard CSS.
button { padding: 12px 24px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; font-size: 18px; font-weight: bold; border: none; border-radius: 50px; cursor: pointer; transition: background 0.4s, transform 0.2s;
&:hover {
background-color: #2980b9;
}
&:active {
background-color: #1f6391;}
}- Normal button styling.
- &:hover — changes background color on hover.
- &:active — even darker color when the button is pressed.
