Rainbow Hover effect using HTML | CSS

 



HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr" >
   <head>
      <meta charset="utf-8">
      <title>Effect by Growcode</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
        <div class="container text-center">
  <a class="rainbow rainbow-1">Home<a/>
  <a class="rainbow rainbow-2">Services<a/>
  <a class="rainbow rainbow-3">About<a/>
   
    <div class="follow">
    <a class="rainbow-1" href="http://instagram.com/growcode_">Follow me on Instagram<a/>
</div>
   </body>
</html>



CSS : 


body {
  font-family: 'Nunito', sans-serif;
  background-color: black;
}

.container {
  margin-top: 150px;
}

.text-center {
  text-align: center;
}

.rainbow {
  background-color: #ffffff;
  border-radius: 4px;
  color: rgb(16, 16, 16);
  cursor: pointer;
  padding: 8px 16px;

}

.rainbow-1:hover {
  background-image: linear-gradient(to right, red, orange,
      yellow, green, blue, indigo, red);
  animation: slidebg 3s linear infinite;
}

.rainbow-2:hover {
  background-image: linear-gradient(to left, rgb(167, 209, 237),
      rgb(0, 255, 4), yellow, rgb(255, 18, 113), blue, indigo,
      violet, red);
  animation: slidebg 2s linear infinite;
}

.rainbow-3:hover {
  background-image: linear-gradient(to right, red, orange,
      yellow, green, blue, indigo, red);
  animation: slidebg 4s linear infinite;
}

@keyframes slidebg {
  to {
    background-position: 20vw;
  }
}

.follow {
  margin-top: 40px;
}

.follow a {
  color: rgb(255, 255, 255);
  padding: 8px 16px;
  text-decoration: none;
}




Comments

Post a Comment

Popular Posts