Demo for Show / Hide HTML Social Buttons on Hover

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
Access-Control-Allow-Origin: *
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.center {
  /* width: 315px;
  text-align: left; */
}
.center ul {
  list-style: none;
  position: relative;
  display: inline-block;
}
.center ul .text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #1f7a7a;
  color: #eee;
  line-height: 50px;
  border-radius: 50px;
  font-size: 22px;
  pointer-events: none;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  transition: opacity 0.5s 0.75s ease-out;
}
.center ul:hover .text {
  opacity: 0;
  transition: opacity 0.5s 0.125s ease-out;
}
.center ul li {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: #1f7a7a;
  text-align: center;
  line-height: 55px;
  margin: 0 -16px;
  cursor: pointer;
  border-radius: 0px;
  transition: background-color 0.5s ease-out, border-radius 0.5s 0.25s ease-out,
    margin 0.5s 0.25s ease-out;
}
.center ul li:hover {
  background: #1a6565;
}
.center ul li i {
  color: #eee;
  font-size: 22px;
  opacity: 0;
  transition: opacity 1.7s;
}
.center ul:hover li i {
  opacity: 1;
}
.center ul li:nth-child(1) {
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}
.center ul li:nth-child(5) {
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
}
.center ul:hover li {
  border-radius: 50px;
  margin: 0 3px;
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:600&amp;display=swap'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="center">
  <ul>
    <li><i class="fa fa-facebook"></i></li>
    <li><i class="fa fa-twitter"></i></li>
    <li><i class="fa fa-instagram"></i></li>
    <li><i class="fa fa-linkedin"></i></li>
    <li><i class="fa fa-youtube"></i></li>
    <div class="text">Follow</div>
  </ul>
</div>
<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Social Buttons Code with Counter on Hover

In this post, the social buttons are square and in hover mode, the number of likes or followers is shown. In addition, the background color of the buttons . . .

Drop Down Social Links with Cursor Change . . .

In this code we have a drop-down list. This drop-down list consists of social icons with their names. The overall theme of this drop-down list is also . . .

Social Buttons Code with Dip Effect on Hover

The social buttons in this code have an orange theme. By placing one of these buttons during the hover, these buttons will sink.

HTML Dynamic Social Buttons with Hover Effect

In this post, we have some social buttons in dark gray. During the hover, these buttons first have a circular background and then a square background.