LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);

body {
  font-family: "Roboto";
  background-color: #42d3a2;
  margin: 0;
  padding: 0;
}
.center {
  width: 100vw;
  height: 100vh;
  display: table;
  box-sizing: border-box;
}

.btn-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.btn {
  position: relative;
  margin: 20px auto;
  border-radius: 50px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 18px;
  box-shadow: 0px 0px 0px 3px white;
  color: white;
  transition-property: width;
  transition-duration: .2s;
}

.btn:hover {
  width: 146px;
  box-shadow: 0px 0px 0px 3px white;
}

.btn:hover .share-label {
  top: 1px;
  opacity: 1;
  transition-property: top, opacity;
  transition-duration: 0.3s;
  transition-delay: .3s;
}

.share-label {
  margin-left: 33px;
  top: 7px;
  opacity: 0;
  position: relative;
}

.share-label span {
  color: white;
  font-size: 12px;
}

.share-icon {
  position: absolute;
  top: 8px;
  left: 18px;
}

.btn i {
  font-size: 34px;
}
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv