LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
What do you want

Something
more

CSS
body {
  font-family:sans-serif;
  margin:0;
}
.parent {
  background-image:url("https://images.unsplash.com/photo-1478427433968-28045906c1dd?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=");
  background-position:center center;
  background-size:cover;
  display:flex;
  position:relative;
  height:100vh;
  width:100vw;
  align-items:flex-end;
  justify-content:center;
}

.button {
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.95);
  color:#fff;
  position:relative;
  padding:.5em 1em;
  margin-bottom:4em;
  text-decoration:none;
  text-transform:uppercase;
  transition:all .3s ease;
  z-index:1;
}

.paint {
  content:"";
  background-color:#5D1303;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  mix-blend-mode:overlay;
  transition:background-color .6s ease;
}

h1 {
  color:rgba(255,255,255,.25);
  font-size:4.5em;
  line-height:1;
  position:absolute;
  text-align:center;
  top:15vh;
  transition:color 1s ease;
}

h1 span {
  color:rgba(255,255,255,0);
  transition:all 5s ease;
}

.button:hover {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.15);
}

.button:hover + .paint {
  background-color:#7DF3FD;
}

.button:hover + .paint + h1,
.button:hover + .paint + h1 span{
  color:rgba(0,0,0,.8);
}

.button:hover + .paint + h1 span {
  font-size:2em;
  letter-spacing:100px;
}
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv