Animated share button with html and css

Posted on January 8th, 2020

Here is an amazing animated share button which is created with html and css only from Darkcode. Just click on the button Run Pen below, to see how it works:

Note: This project also use Font Awesome for creating icons.

How to create an animated share button

Step 1: Add Html

<div class="share-button">
  <span><i class="fas fa-share-alt"></i> Share!</span>
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  background: #f1f1f1;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.share-button {
  width: 280px;
  height: 80px;
  background: #dfe6e9;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s linear;
}

.share-button:hover {
  transform: scale(1.1);
}

.share-button span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2d3436;
  color: #f1f1f1;
  text-align: center;
  line-height: 80px;
  z-index: 999;
  transition: 0.6s linear;
  border-radius: 40px;
}

.share-button:hover span {
  transform: translateX(-100%);
  transition-delay: 0.3s;
}

.share-button a {
  flex: 1;
  font-size: 26px;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: 0.3s linear;
}

.share-button:hover a {
  opacity: 1;
  transform: translateX(0);
}

.share-button a:nth-of-type(1) {
  transition-delay: 1s;
}

.share-button a:nth-of-type(2) {
  transition-delay: 0.8s;
}

.share-button a:nth-of-type(3) {
  transition-delay: 0.6s;
}

.share-button a:nth-of-type(4) {
  transition-delay: 0.4s;
}
Web UI Element
Button