Animated focus styles for kbd users

Developer
Heydon
Size
1,987 Kb
Views
28,322

How do I make an animated focus styles for kbd users?

Animating outline (and outline-offset) can result in some eye-catching focus styles, hopefully helping keyboard users to identify which controls they are focusing.. What is a animated focus styles for kbd users? How do you make a animated focus styles for kbd users? This script and codes were developed by Heydon on 27 August 2022, Saturday.

Animated focus styles for kbd users Previews
IQ Test

Animated focus styles for kbd users - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated focus styles for kbd users</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Animated <code>:focus</code> styles for keyboard users</h1>
<p>Hint: You have to use the <kbd>TAB</kbd> key</p>
<button>Style 1</button>
<button>Style 2</button>
<button>Style 3</button>
</body>
</html>

Animated focus styles for kbd users - Script Codes CSS Codes

/* get rid of inner focus */
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;
}
/* generic button styles */
button { background: #5245F5; border: 0; font-size: 2em; margin: 0.5em; padding: 0.25em 1em; color: #fff; cursor: pointer; transition: 1.25s ease all; font-family: inherit;
}
/* bit of hover */
button:hover { background: #3F3889;
}
/* first animated focus style */
button:nth-of-type(1) { outline: thin dotted transparent; outline-offset: 1em;
}
button:nth-of-type(1):focus { outline-color: #222; outline-offset: 0.125em;
}
/* second animated focus style */
button:nth-of-type(2) { outline: thin solid transparent; outline-offset: 1em;
}
button:nth-of-type(2):focus { outline: 3px solid #222; outline-offset: 0;
}
/* third animated focus style */
button:nth-of-type(3) { outline: 1em solid transparent;
}
button:nth-of-type(3):focus { outline: 3px solid #3F3889; outline-offset: 0;
}
button:active { outline: none; position: relative; top: 2px;
}
/* just some layout */
body { text-align: center; font-size: 125%; font-family: georgia, serif; color: #222;
}
p { font-size: 1.5em;
}
kbd { font-weight: bold; background: #ccc; padding: 0.125em 0.33em; border-radius: 0.125em; box-shadow: 0 0.25em #999;
}
Animated focus styles for kbd users - Script Codes
Animated focus styles for kbd users - Script Codes
Home Page Home
Developer Heydon
Username heydon
Uploaded August 27, 2022
Rating 4
Size 1,987 Kb
Views 28,322
Do you need developer help for Animated focus styles for kbd users?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Heydon (heydon) Script Codes
Name
Hash change logging
4 columns with padding
Focus management of smooth scrolling
CSS only, automated, and accessible external link icon
Theme color inverter with filter
Accessible, pretty radio controls
4 columns, no single remainder
Redesigned gender form field
FUN TIMES Competition
Controlled chaos
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!