ailindev
12/10/2018 - 10:26 PM

Button Sass Styles (Universal Starter)

Button Sass Styles (Universal Starter)

.button
   display: inline-block
   border: none
   color: $light
   text-decoration: none
   background-color: $main-action-color
   padding: 15px 45px
   font-size: 13px
   text-transform: uppercase
   font-weight: 600
   letter-spacing: 3px
   border-radius: 2px
   text-align: center
   position: relative
   outline: none
   transition: all .25s ease
   cursor: pointer
   &::after
      transition: all .3s ease
      position: absolute
      content: ''
      height: 4px
      bottom: 0
      width: 100%
      background-color: darken($main-action-color, 50%)
      opacity: .18
      border-bottom-left-radius: 2px
      border-bottom-right-radius: 2px
      left: 0
   &:focus, &:hover
      text-decoration: none
      color: $light
   &:hover
      background-color: lighten($main-action-color, 5%)
      &::after
         opacity: .22
   &:active
      background-color: darken($main-action-color, 5%)
      &::after
         opacity: .32