Skip to content

Instantly share code, notes, and snippets.

@Shalomeev
Last active July 4, 2018 15:43
Show Gist options
  • Save Shalomeev/bb910ff1de1243758d34bbe67931f09d to your computer and use it in GitHub Desktop.
Save Shalomeev/bb910ff1de1243758d34bbe67931f09d to your computer and use it in GitHub Desktop.
.Button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  max-width: @input-width;
  width: 100%;
  padding: @input-padding-vertical - 1px @input-padding-vertical;
  text-align: center;
  font-size: 16px;
  line-height: 1.5625;
  font-weight: 500;
  text-transform: capitalize;
  border: 1px solid transparent;
  background: @dark-bg-gradient;
  color: #ffffff;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
  @media (max-width: @mobile) {
    max-width: 100%;
  }
  &:after {
    content: "";
    position: absolute;
    background: #ffffff;
    width: calc(~"100% - 2px");
    height: calc(~"100% - 2px");
    left: 1px;
    top: 100%;
    z-index: -2;
    transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
  }
  &:hover{
    color: @main-dark-color;
    border: 1px solid @main-dark-color;
  }
  &:hover:after {
    top: 1px;
  }
}
.Button_blue {
  color: #ffffff;
  background: @accent-color;
  &:after {
    background: #ffffff;
  }
  &:hover{
    color: @accent-color;
    border-color: @accent-color;
  }
}

.Button_transparent {
  background: transparent;
  border: 1px solid #ffffff;
  &:after {
    background: #ffffff;
  }
  &:hover{
    color: @main-dark-color;
    border: 1px solid transparent;
  }
}

.Button_white {
  color: @main-dark-color;
  background: #ffffff;
  &:after {
    background: @dark-bg-gradient;
  }
  &:hover{
    color: #ffffff;
    border: 1px solid #ffffff;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment