Barra de Redes Sociales Flotante

by Slee

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>Barra de Redes Sociales</title>
    <link rel="stylesheet" href="estilos.css" />
    <!--Icon-Font-->
    <script
      src="https://kit.fontawesome.com/eb496ab1a0.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container-bar">
      <input type="checkbox" id="btn-social" />
      <label for="btn-social" class="fa fa-play"></label>
      <div class="icon-social">
        <a href="#" class="fa fa-facebook">
          <span id="title">Facebook</span>
        </a>
        <a href="#" class="fa fa-youtube">
          <span id="title">Youtube</span>
        </a>
        <a href="#" class="fa fa-twitter">
          <span id="title">Twitter</span>
        </a>
        <a href="#" class="fa fa-github">
          <span id="title">Github</span>
        </a>
        <a href="#" class="fa fa-pinterest">
          <span id="title">Pinterest</span>
        </a>
      </div>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.container-bar {
  width: 100%;
  max-width: 50px;
  position: fixed;
  left: 0;
  top: 25%;
}
.container-bar a {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  transition: all 500ms ease;
  color: #fff;
}
.container-bar a:hover {
  background: #1c1c1c;
}
.container-bar .fa-facebook {
  background: #3b5998;
  border-radius: 0px 5px 0px 0px;
}
.container-bar .fa-youtube {
  background: #e52a23;
}
.container-bar .fa-twitter {
  background: #00acee;
}
.container-bar .fa-github {
  background: #747473;
}
.container-bar .fa-pinterest {
  background: #c8232c;
  border-radius: 0px 0px 5px 0px;
}
.container-bar #title {
  position: absolute;
  background: #1c1c1c;
  padding: 0px 8px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  font-size: 15px;
  top: 12px;
  left: 0px;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.container-bar a:hover #title {
  opacity: 1;
  visibility: visible;
  left: 64px;
}
.container-bar #title:after {
  position: absolute;
  content: "";
  border-left: 7px solid transparent;
  border-right: 6px solid #1c1c1c;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  right: 100%;
  top: 8px;
}
#btn-social {
  display: none;
}
.fa-play {
  cursor: pointer;
  transition: all 0.4s;
  font-size: 12px;
  margin-bottom: 5px;
  display: inline-block;
  transform: rotate(180deg);
  color: #49b0e6;
}
#btn-social:checked ~ .fa-play {
  transform: rotate(0deg);
}
.icon-social {
  transition: all 0.4s;
  transform: translateX(0%);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
}
#btn-social:checked ~ .icon-social {
  transform: translateX(-100%);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0);
}