LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.wrapper {
  background-color: #F3F7F9;
  height: 20rem;
  width: 50rem;
  margin: 0 auto;
  margin-top: 3rem;
  border-radius: .5rem;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.05), 0 32px 32px rgba(0, 0, 0, 0.1), 0 64px 64px rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wrapper .box {
  cursor: pointer;
  height: 6rem;
  width: 12rem;
  margin: 1rem;
  margin-top: 5rem;
  border-radius: .3rem;
  position: relative;
}
.wrapper .box:hover:after {
  bottom: -1.2rem;
}
.wrapper .box::after {
  -webkit-transition: bottom .3s ease;
  transition: bottom .3s ease;
  position: absolute;
  content: '';
  height: 60%;
  width: 75%;
  bottom: -.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: blur(25px);
          filter: blur(25px);
  background: inherit;
}
.wrapper .box#one {
  background: -webkit-linear-gradient(bottom left, #D183FE, #0AEDE1);
  background: linear-gradient(to top right, #D183FE, #0AEDE1);
}
.wrapper .box#two {
  background: -webkit-linear-gradient(bottom left, #FE6BBE, #FAD865);
  background: linear-gradient(to top right, #FE6BBE, #FAD865);
}
.wrapper .box#three {
  background: -webkit-linear-gradient(bottom left, #0EDC96, #09F6F5);
  background: linear-gradient(to top right, #0EDC96, #09F6F5);
}
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv