LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  margin: 0;
  background: #fff;
}

.button {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  margin: -50px;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 2px 2px 8px -1px #4F4F4F;
  box-shadow: 2px 2px 8px -1px #4F4F4F;
  -ms-box-shadow: 2px 2px 8px -1px #4F4F4F;
  transition: all ease-in-out .05s;
}
.button:active {
  -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
          transform: scale(.95);
  -webkit-box-shadow: none;
}

.icon, .upload, .done, .circle, .clipper, .bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.bg {
  background: #1976D2;
  -webkit-transition: background 0s linear;
          transition: background 0s linear;
  border-radius: 100%;
}
input:checked ~ .bg {
  background: #38623C;
  -webkit-transition-duration: 2s;
          transition-duration: 2s;
}

.upload, .done, .canceled {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: opacity .5s linear;
          transition: opacity .5s linear;
}
.upload svg, .done svg, .canceled svg {
  fill: white;
}

.done {
  opacity: 0;
}

.canceled {
  opacity: 0;
}

input:checked ~ .icon .done {
  opacity: 1;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

input:checked ~ .icon .canceled {
  opacity: 1;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

.upload {
  opacity: 1;
}
input:checked ~ .icon .upload {
  opacity: 0;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

.clipper {
  width: 50%;
  overflow: hidden;
}
.clipper:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 0px solid #EDEDED;
  -webkit-transition: -webkit-transform 0s linear;
          transition: transform 0s linear;
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.clipper._1:before {
  border-width: 5px 0 5px 5px;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
.clipper._2:before {
  border-width: 5px 5px 5px 0;
  border-top-right-radius: 100% 50%;
  border-bottom-right-radius: 100% 50%;
  -webkit-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
input:checked ~ .circle .clipper:before {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
}
input:checked ~ .circle .clipper._1:before {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.clipper._2, .clipper._2:before {
  left: auto;
  right: 0;
}

Description

It seems broken but it's for integration with backend :)
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv