<html>
  <head>
    <meta charset="utf-8">
    <title>Social Icons Animation</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>

    <div class="container">
      <ul>
        <p class="hoverTxt" onmouseover="changeText()" onmouseout="changeback()"; onclick="changeColor('#a5a58d')";>Hover Us Please!!!</p>
        <li class="facebook" onclick="changeColor('#6F6EAF')"><i class="fab fa-facebook-f"></i></li>
        <li class="twitter" onclick="changeColor('#319197')"><i class="fab fa-twitter"></i></li>
        <li class="instagram" onclick="changeColor('#F99D4C')"><i class="fab fa-instagram"></i></li>
      </ul>
    </div>







    <!-- Javascript File -->
    <script type="text/javascript" src="script.js">

    </script>
    <script src="https://kit.fontawesome.com/1cd4972453.js" crossorigin="anonymous"></script>
  </body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  user-select: none;
}
.container{
  margin: 0 auto;
}
.container ul{
  transition: 0.5s;
  position: relative;
  max-width: 40vw;
  margin: 30% auto !important;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: #a5a58d;
  box-shadow:0 10px 13px -6px rgba(0,0,0,.2), 0 21px 33px 3px rgba(0,0,0,.14), 0 8px 40px 7px rgba(0,0,0,.12)
}
.container ul p{
  font-weight: 500;
  color: #fff;
  padding: 0 10px;
}
.container ul li{
  list-style: none;
  display: inline-block;
  margin: 5px 20px;
  transform: scale(1.5);
  filter: invert(1);
  cursor: pointer;
}
.container ul li i{
  transition: 0.5s;
}
.container ul li i:hover{
  transform: rotate(360deg);
}

.container ul li i:active{
  transform: translateY(-25%);
}


.hoverTxt{
  cursor: pointer;
  transition: 0.5s;
}

.hoverTxt:active{
  color:#333;
  letter-spacing: 1px;
}

.container .randomText{
  margin-top: 10em;
  text-align: center;
  cursor: pointer;
}
let hvrtxt = document.querySelector('.hoverTxt')
let bigText = document.querySelector('.container h1')

let bgClr = document.querySelector('.container ul')
function changeText(){
  hvrtxt.textContent = 'Reset Color!!!'
}

function changeback(){
  hvrtxt.textContent = 'Hover us Please!!!'
}

function changeColor(color){
  bgClr.style.background = color;
}

function changeBigText(){
  bigText.textContent = 'The text will change too, Haha!!!'
}

function resetBigText(){
  bigText.textContent = 'The colors will Change'
}

// Changing nThe Whole page to darkmode by clicking a button

function darkMode(){
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.