CSS - Focus Effects

Previous
Quiz
Next

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.

Focus on me!

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

<!DOCTYPE html>
<html>

<head>
    <style>
        .input-field {
            width: 80%; 
            height: 30px; 
            padding: 5px;
            margin: 10px 0;
            background-color: #f0f0f0; 
            border: 1px solid black; 
            font-size: 16px;
            outline: none;
        }
        .input-field:focus {
            border: 3px solid darkblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <input type="text" class="input-field" 
               placeholder="Enter your name" tabindex="0">
        <input type="text" class="input-field" 
               placeholder="Enter your email" tabindex="1">
        <input type="text" class="input-field" 
               placeholder="Enter your password" tabindex="2">
    </div>
</body>

</html>

CSS Button With Focus Effect

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

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #ffffff;
            color: #228B22;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }
        button:focus {
            background-color: #FFCC33;
            color: #ffffff;
            outline: none;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <button> Focus on me! </button>
</body>
</html>

CSS Border With Focus Effect

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

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            border-radius: 20px;
            outline: none;
        }
    </style>
</head>

<body>
      <div tabindex="0"> Focus on me! </div>
</body>

</html>

CSS Box-Shadow With Focus Effect

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

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            box-shadow: 20px 20px 10px grey;
            outline: none;
        }
    </style>
</head>

<body>
    <div tabindex="0"> Focus on me! </div>
</body>

</html>

CSS Styling on Focusing

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

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 300px;
            overflow: hidden;
            display: grid;
            justify-content: center;
            align-items: center;
        }
    
        .glow {
            padding: 10px;
            width: 250px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: #111;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 20px;
        }
    
        .glow:before {
            content: '';
            background: linear-gradient(60deg, #ff0000, #ff7300, 
                                #fffb00, #48ff00, #00ffd5, #002bff, 
                                #7a00ff, #ff00c8, #ff0000);
            position: absolute;
            top: -4px;
            left:-4px;
            background-size: 400%;
            z-index: -1;
            filter: blur(15px);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            animation: glowing 20s linear infinite;
            opacity: 0;
            transition: opacity .3s ease-in-out;
            border-radius: 10px;
        }
    
        .glow:focus:before {
            opacity: 1;
        }
    
        .glow:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #111;
            left: 0;
            top: 0;
            border-radius: 10px;
        }
    
        @keyframes glowing {
            0% { 
                background-position: 0 0; 
            }
            50% { 
                background-position: 400% 0; 
            }
            100% { 
                background-position: 0 0; 
            }
        }
    </style>
</head>

<body>
    <button class="glow" type="button" tabindex="0">
        FOCUS ON ME!
    </button>
</body>
</html>
Print Page
Previous
Next
Advertisements