<head>
  <link href="https://fonts.googleapis.com/css2?family=Cantarell&display=swap" rel="stylesheet">
</head>

<body>
  
  <a href="#">
    <div class="fearless">
      Inspiring
    </div>
  </a>
  
  <a href="#">
    <div class="uplifting">
      Uplifting
    </div>
  </a>
  
  <a href="href">
   <div class="thought_provoking">
      Thought Provoking 
    </div>
  </a>
  
   <a href="href">
   <div class="adventurous">
      Love 
    </div>
  </a>
  
</body>
body {
  font-family: 'Cantarell', sans-serif;
  background-color: #000000;
}

.fearless {
  font-size: 2em;
  font-weight: bold;
  color: white;
  padding: 50px;
}

.uplifting {
  font-size: 2em;
  font-weight: bold;
  color: white;
  padding: 50px;
}

.thought_provoking {
  font-size: 2em;
  font-weight: bold;
  color: white;
  padding: 50px;
  display: block;
}

.adventurous {
  font-size: 2em;
  font-weight: bold;
  color: white;
  padding: 50px;
  display: block;
}


a:link {
  text-decoration: none;
   display: block;
}

a:hover > .fearless { 
  background: rgb(217,107,107);
  background: linear-gradient(90deg, rgba(217,107,107,1) 0%, rgba(29,180,197,1) 100%);
}

a:hover > .uplifting { 
  background: rgb(236,173,78);
  background: linear-gradient(90deg,  rgba(236,173,78,1) 0%, rgba(237,181,218,1) 100%);
}

a:hover > .thought_provoking { 
  background: rgb(188,217,107);
  background: linear-gradient(90deg,    rgba(188,217,107,1) 0%, rgba(29,166,197,1) 100%);
}

a:hover > .adventurous { 
  background: rgb(107,206,217);
  background: linear-gradient(90deg,    rgba(107,206,217,1) 0%, rgba(197,29,189,1) 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.