LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Animated :focus styles for keyboard users

Hint: You have to use the TAB key

CSS
/* 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;
}

Description

Animating outline (and outline-offset) can result in some eye-catching focus styles, hopefully helping keyboard users to identify which controls they are focusing.
Term
Mon, 11/27/2017 - 21:29

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv