Animated focus styles for kbd users

Developer
Heydon
Size
1,987 Kb
Views
28,336
  1. Animated focus styles for kbd users Previews
  2. Animated focus styles for kbd users HTML Codes
  3. Animated focus styles for kbd users CSS Codes

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,336
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
Vue.js TODO List
Just add javascript
4 columns with padding
Focus management of smooth scrolling
CSS only, automated, and accessible external link icon
FUN TIMES Competition
File system with nested lists
Redesigned gender form field
Ransom Note With Google Font Subsets
Hash change logging
Create amazing blog posts 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!