CSS - Focus Effects

CSS focus effects are used to make form elements like input fields, buttons, and links more dynamic and engaging for users interacting with the webpage.

The :focus pseudo-class in CSS is used to target an element when it receives focus (by clicking on it or by pressing tab). Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.

The :focus is a tool to make interactive elements more dynamic and engaging, especially when users navigate using the keyboard.

Table of Contents

What is Focus Pseudo-Class?

• In CSS, the pseudo-class :focus is a type of selector used to target and style an element when it gains focus, usually through keyboard navigation or mouse interaction.

• Focus effects are mostly used with interactive elements like form fields, buttons, etc., to provide users a clear indication of the focused element.

• Focus effects are useful to add a dynamic and engaging look to a website and improve accessibility.

CSS Focus Effect on Input Field

Here is an example of styling input fields when they receive focus:

Example

CSS Button With Focus Effect

Here is an example of styling a button in a focused state.

Example

CSS Border With Focus Effect

Here is an example that shows how the border is changing when the element receives focus:

Example

CSS Box-Shadow With Focus Effect

Here is an example, where box-shadow is added when the div receives focus:

Example

CSS Styling on Focusing

Here is an example, where a shadow effect is given to a button on focus:

Example