assets/scss/_buttons.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

.btn{
  font-family: $secondary-font;
  border: none;
  color: $white !important;
  padding: 20px 45px;
  border-radius: 0;
  &:focus{
    box-shadow: none;
  }
  @include desktop{
    padding: 17px 40px;
  }
  .btn-area{
    display: block;
    overflow: hidden;
    span{
      position: relative;
      display: block;
      padding: 2px 0;
      transition: transform .9s cubic-bezier(.19,1,.22,1);
      transform-origin: left center;
      &::after{
        content: attr(data-text);
        position: absolute;
        top: 150%;
        left: 0;
        transform: skewY(30deg);
        transform-origin: left center;
        transition: transform .9s cubic-bezier(.19,1,.22,1);
      }
    }
  }
  &:hover{
    .btn-area{
      span{
        transform: translateY(-150%) skewY(7deg);
        &::after{
          transform: skewY(-7deg);
        }
      }
    }
  }
  &:visited{
    .btn-area{
      span{
        transform: translateY(-150%) skewY(7deg);
        &::after{
          transform: skewY(-7deg);
        }
      }
    }
  }
}

.btn-sm{
  padding: 15px 40px !important;
}

.btn-sm-rounded{
  border-radius: 40px;
}

.btn-primary{
  background: $primary-color;
  color: $white;
  &:hover{
    background: darken($color: $primary-color, $amount: 10);
  }
}

.btn-secondary{
  background: $secondary-color;
  color: $white;
  &:hover{
    background: darken($color: $secondary-color, $amount: 10);
  }
}