Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //////pug
- a(href="#").button.btn-hvr_left
- span.btn_text To left
- ////html
- <a class="button btn-hvr_left" href="#">
- <span class="btn_text">To left</span>
- </a>
- /////sass
- $buttonBackgroundColor: #fff
- $buttonPseudoBackgroundColor: #000
- $buttonWidth: 200px
- $buttonHeight: 45px
- $buttonColor: #000
- $buttonTransition: .25s ease
- $buttonTextTransition: .5s ease
- .button
- text-transform: uppercase
- display: inline-block
- text-align: center
- line-height: $buttonHeight
- width: $buttonWidth
- height: $buttonHeight
- border: 1px solid black
- position: relative
- background-color: $buttonBackgroundColor
- .btn_text
- color: $buttonColor
- transition: color $buttonTextTransition
- .btn-hvr_left
- transition: background-color, border-color $buttonTransition
- &::before
- position: absolute
- content: ''
- background-color: #000
- width: 0
- height: 100%
- right: 0
- top: 0
- transition: width $buttonTransition
- &:hover
- border-color: #fff
- .btn_text
- color: white
- position: relative
- &::before
- width: 100%
Add Comment
Please, Sign In to add comment