pixelbrad
11/10/2017 - 6:32 PM

Nuka Button

Source: reel-mensch-2016, main.scss

a.button{
  font-size: 18.5px;
  display: inline-block;
  background: $main_accent;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  padding: 11px 23px;
  margin-top: 15px;
  position: relative;

  -webkit-transition: color 0.3s, background 0.3s;
  transition: color 0.3s, background 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
a.button:hover{
  background: $accent_hover;
}

a.button.nuka{
  background: none;
  margin-left: 5px;
}
a.button.nuka:hover{
  background: none;
  color: $main_accent;
}
a.button.nuka:before,
a.button.nuka:after{
  // display: block;
  // content: '';
  // width: 70%;
  // height: 121%;
  // position: absolute;
  // z-index: -1; 
  // left: 15%;
  // top: -11%;
  // background: #C3E8E9;
  // background: rgba(21, 163, 172, 0.15);

  content: '';
  position: absolute;
  border-radius: inherit;
  background: $main_accent;
  z-index: -1;

  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
a.button.nuka:before {
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  opacity: 0.2;
  -webkit-transform: scale3d(0.7, 1, 1);
  transform: scale3d(0.7, 1, 1);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
a.button.nuka:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale3d(1.1, 1, 1);
  transform: scale3d(1.1, 1, 1);
  -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
  transition: transform 0.3s, background-color 0.3s;
}
a.button.nuka:hover::before {
  opacity: 1;
}
a.button.nuka:hover::after {
  background-color: #fff;
}
a.button.nuka:hover::after,
a.button.nuka:hover::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}