Animated Share Button by daveTee

0 Add to Favorites

HTML Code
CSS Code

.mainbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

label {
  position: relative;
  background: #fff;
  height: 50px;
  width: 150px;
  border-radius: 35px;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  display: block;
  color: #0984e3;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  transition: all 0.3s ease;
}

label:hover {
  letter-spacing: 1px;
}

label::before {
  content: "Cancel";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 35px;
  opacity: 0;
}

label i {
  font-size: 20px;
  margin-bottom: 2px;
}

#check {
  display: none;
}

#check:checked ~ label::before {
  opacity: 1;
}

.media-icons {
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  background: #fff;
  width: 140%;
  height: 110%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  border-radius: 35px;
  padding: 4px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

#check:checked ~ .media-icons {
  opacity: 1;
  pointer-events: auto;
  top: -84px;
}

.media-icons::before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  background: #fff;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

.media-icons a {
  font-size: 22px;
  color: #0984e3;
  transition: all 0.3s ease;
}

.media-icons a:hover {
  transform: translateY(-2px);
}

.media-icons a:nth-child(1):hover {
  color: #426782;
}

.media-icons a:nth-child(2):hover {
  color: #1da1f2;
}

.media-icons a:nth-child(3):hover {
  color: #e1306c;
}

.media-icons a:nth-child(4):hover {
  color: #ff0000;
}

Uploaded 18th July 2024 Views 189 #animated #social #share #blue #check #font awesome

David T @daveTee

Member since 15th July 2024

CSS Properties Used

There are 30 CSS properties used in the above example. Click to view and learn about each property.

HTML Tags Used

There are 9 HTML Tags used in the above example. Click to view and learn about each tag.

html head link body div input label i a