Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button Sass Styles (Universal Starter)
.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 ease
cursor: pointer
&::after
transition: background-color .2s ease
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
@MuratOrs

This comment has been minimized.

Copy link

@MuratOrs MuratOrs commented Sep 4, 2018

Thanks

@danmiles

This comment has been minimized.

Copy link

@danmiles danmiles commented Oct 29, 2018

Спасибо, ты делаешь благородное дело бро, делишься знаниями)

@deckleur

This comment has been minimized.

Copy link

@deckleur deckleur commented Jan 30, 2019

спасибо огромное! За терпение и труд!

@sulimopo

This comment has been minimized.

Copy link

@sulimopo sulimopo commented Dec 25, 2019

лучший из лучших!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.