Hotodogo | Snippets: Hover Effect 004

*, *::before, *::after {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	background: white;
	height: 100vh;
	width: 100vw;
	font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: black;
	line-height: 1.2;
}

CSS Before Head

HTML Head

a {
  color: inherit;
  text-decoration: none;
}

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a:hover {
  background-size: 0 3px, 100% 3px;
}

/* Presentational Styles */
body {
  display: grid;
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 700;
  height: 100vh;
  place-items: center;
}

CSS After Head

JS Before HTML Body

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

HTML Body

HTML Foot

JS After HTML Body