Skip to content

Instantly share code, notes, and snippets.

@Manimall

Manimall/button.sass

Forked from agragregra/button.sass
Created January 27, 2018 08:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Manimall/fadff2892bfe501a8a3fa2e64ae6b51b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Manimall/fadff2892bfe501a8a3fa2e64ae6b51b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @agragregra agragregra revised this gist Sep 12, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions button.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,7 @@
    position: relative
    outline: none
    transition: background-color .1s ease
    cursor: pointer
    &::after
    transition: background-color .2s ease
    position: absolute
  2. @agragregra agragregra revised this gist Dec 21, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions button.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,9 @@
    text-align: center
    position: relative
    outline: none
    transition: background-color .1s
    transition: background-color .1s ease
    &::after
    transition: background-color .1s
    transition: background-color .2s ease
    position: absolute
    content: ''
    height: 4px
  3. @agragregra agragregra created this gist Dec 19, 2016.
    39 changes: 39 additions & 0 deletions button.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    .button
    display: inline-block
    border: none
    color: #fff
    text-decoration: none
    background-color: $accent
    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: background-color .1s
    &::after
    transition: background-color .1s
    position: absolute
    content: ''
    height: 4px
    bottom: 0
    width: 100%
    background-color: darken($accent, 50%)
    opacity: .18
    border-bottom-left-radius: 2px
    border-bottom-right-radius: 2px
    left: 0
    &:focus, &:hover
    text-decoration: none
    color: #fff
    &:hover
    background-color: lighten($accent, 5%)
    &::after
    opacity: .22
    &:active
    background-color: darken($accent, 5%)
    &::after
    opacity: .32