Social media icon hover with Tool-tip - Html

Social media icon hover with Tool-tip - Html | Css

Hello! Let's learn how to make social media hover effect with tool tip pop up using Html and Css only.

Please follow the below code and get started.

HTML Code

<body>
  <div class="container">
    <button class="icon">
      <i class="fab fa-facebook-f"></i>
      <small>facebook</small>
    </button>
    <button class="icon">
      <i class="fab fa-instagram"></i>
      <small>instagram</small>
    </button>
    <button class="icon">
      <i class="fab fa-twitter"></i>
      <small>twitter</small>
    </button>
    <button class="icon">
      <i class="fab fa-youtube"></i>
      <small>youtube</small>
    </button>
    <button class="icon">
      <i class="fab fa-linkedin"></i>
      <small>linkedin</small>
    </button>
  </div>
</body>

CSS Code

:root {
  --gray: #ddd;
  
  --fb: #4267B2;
  --insta: #cd486b;
  --twitter: #1DA1F2;
  --ytube: #FF0000;
  --lin: #0A66C2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* initail icon state */
.icon {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--gray);
  border: 0;
  outline: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  transition: .25s ease;
}

/* hover state icon */
.icon:hover:nth-child(1) {
  background: var(--fb);
  color: #fff;
}

.icon:hover:nth-child(2) {
  background: var(--insta);
  color: #fff;
}

.icon:hover:nth-child(3) {
  background: var(--twitter);
  color: #fff;
}

.icon:hover:nth-child(4) {
  background: var(--ytube);
  color: #fff;
}

.icon:hover:nth-child(5) {
  background: var(--lin);
  color: #fff;
}

/* tootltip */
small {
  position: absolute;
  background: var(--gray);
  padding: .25rem 0.5rem;
  color: #000;
  opacity: 0;
  transition: .25s ease;
  z-index: -1;
}

small::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gray);
}

.icon:hover small {
  transform: translateY(-60px);
  opacity: 1;
}

Output

That is all! Hope you like it. Thank you for visiting.

Code by - AltafAlam Shaikh

Font awesome Icon - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />

Social media icon hover with Tool-tip - Html | Css

Social media icon hover with Tool-tip - Html | Css

Contact Form