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

Tags: #animated, #social, #share, #blue, #check, #font awesome

daveTee

CSS Properties Used

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

position left top transform background height width border-radius line-height text-align font-size font-weight display color cursor box-shadow gap align-items justify-content transition letter-spacing content opacity margin-bottom label padding z-index pointer-events bottom a