CaveOps | Snippets: Hover Effect 001

CSS Before Head

HTML Head

* {
  outline: none;
  box-sizing: border-box;
}

body {
  background: white;
  display: grid;
  height: 100vh;
  place-items: center;
}

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #54b3d6;;
}

/* Presentational styles */
a {
  color: #54b3d6;
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

CSS After Head

JS Before HTML Body

<a href="#">Hover this link</a>

HTML Body

HTML Foot

JS After HTML Body