kickstrap/templates/new/assets/css/_auth-buttons.styl

Framework for advanced Bootstrap web development

.btn-auth,
.btn-auth:visited
    position: relative
    display: inline-block
    height: 22px
    padding: 0 1em
    border: 1px solid #999
    border-radius: 2px
    margin: 0
    text-align: center
    text-decoration: none
    font-size: 14px
    line-height: 22px
    white-space: nowrap
    cursor: pointer
    color: #222
    background: #fff
    -webkit-box-sizing: content-box
    -moz-box-sizing: content-box
    box-sizing: content-box
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    -webkit-appearance: none

.btn-auth:hover,
.btn-auth:focus,
.btn-auth:active
    color: #222
    text-decoration: none

.btn-auth:before
    content: ""
    float: left
    width: 22px
    height: 22px
    background: url(../img/auth-icons.png) no-repeat 99px 99px

.btn-auth.large
    height: 36px
    line-height: 36px
    font-size: 20px

.btn-auth.large:before
    width: 36px
    height: 36px

.btn-auth::-moz-focus-inner
    border: 0
    padding: 0


// Facebook

.btn-facebook,
.btn-facebook:visited
    border-color: #29447e
    border-bottom-color: #1a356e
    color: #fff
    background-color: #5872a7
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7))
    background-image: -webkit-linear-gradient(#637bad, #5872a7)
    background-image: -moz-linear-gradient(#637bad, #5872a7)
    background-image: -ms-linear-gradient(#637bad, #5872a7)
    background-image: -o-linear-gradient(#637bad, #5872a7)
    background-image: linear-gradient(#637bad, #5872a7)
    -webkit-box-shadow: inset 0 1px 0 #879ac0
    box-shadow: inset 0 1px 0 #879ac0

.btn-facebook:hover,
.btn-facebook:focus
    color: #fff
    background-color: #3b5998

.btn-facebook:active
    color: #fff
    background: #4f6aa3
    -webkit-box-shadow: inset 0 1px 0 #45619d
    box-shadow: inset 0 1px 0 #45619d

// Icon

.btn-facebook:before
    border-right: 1px solid #465f94
    margin: 0 1em 0 -1em
    background-position: 0 0

.btn-facebook.large:before
    background-position: 0 -22px


// Github

.btn-github,
.btn-github:visited
    border-color: #d4d4d4
    background: #ececec
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec))
    background-image: -webkit-linear-gradient(#f4f4f4, #ececec)
    background-image: -moz-linear-gradient(#f4f4f4, #ececec)
    background-image: -ms-linear-gradient(#f4f4f4, #ececec)
    background-image: -o-linear-gradient(#f4f4f4, #ececec)
    background-image: linear-gradient(#f4f4f4, #ececec)

.btn-github:hover,
.btn-github:focus
    border-color: #518cc6
    border-bottom-color: #2a65a0
    color: #fff
    background-color: #599bdc
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3))
    background-image: -webkit-linear-gradient(#599bdc, #3072b3)
    background-image: -moz-linear-gradient(#599bdc, #3072b3)
    background-image: -ms-linear-gradient(#599bdc, #3072b3)
    background-image: -o-linear-gradient(#599bdc, #3072b3)
    background-image: linear-gradient(#599bdc, #3072b3)

.btn-github:active
    border-color: #2A65A0
    border-bottom-color: #518CC6
    color: #fff
    background: #3072B3
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc))
    background: -webkit-linear-gradient(#3072b3, #599bdc)
    background: -moz-linear-gradient(#3072b3, #599bdc)
    background: -ms-linear-gradient(#3072b3, #599bdc)
    background: -o-linear-gradient(#3072b3, #599bdc)
    background: linear-gradient(#3072b3, #599bdc)

// Icon

.btn-github:before
    margin: 0 0.6em 0 -0.6em
    background-position: -44px 0

.btn-github:hover:before,
.btn-github:focus:before,
.btn-github:active:before
    background-position: -66px 0

.btn-github.large:before
    background-position: -72px -22px

.btn-github.large:hover:before,
.btn-github.large:focus:before,
.btn-github.large:active:before
    background-position: -108px -22px

// Google

.btn-google,
.btn-google:visited
    border-color: #3079ed
    color: #fff
    background: #4787ed
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed))
    background-image: -webkit-linear-gradient(#4d90fe, #4787ed)
    background-image: -moz-linear-gradient(#4d90fe, #4787ed)
    background-image: -ms-linear-gradient(#4d90fe, #4787ed)
    background-image: -o-linear-gradient(#4d90fe, #4787ed)
    background-image: linear-gradient(#4d90fe, #4787ed)

.btn-google:hover,
.btn-google:focus,
.btn-google:active
    color: #fff
    background-color: #357ae8
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8))
    background-image: -webkit-linear-gradient(#4d90fe, #357ae8)
    background-image: -moz-linear-gradient(#4d90fe, #357ae8)
    background-image: -ms-linear-gradient(#4d90fe, #357ae8)
    background-image: -o-linear-gradient(#4d90fe, #357ae8)
    background-image: linear-gradient(#4d90fe, #357ae8)

.btn-google:active
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3)
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3)

// Icon

.btn-google:before
    margin: 0 1em 0 -1em
    background-position: -88px 0
    background-color: #e6e6e6

.btn-google.large:before
    background-position: -144px -22px

// Twitter

.btn-twitter,
.btn-twitter:visited
    border-color: #a6cde6
    color: #327695
    background: #cfe4f0
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255, 255, 255, 0)))
    background-image: -webkit-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0))
    background-image: -moz-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0))
    background-image: -ms-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0))
    background-image: -o-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0))
    background-image: linear-gradient(#f1f5f7, rgba(255, 255, 255, 0))
    -webkit-box-shadow: inset 0 1px 0 #fff
    box-shadow: inset 0 1px 0 #fff

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active
    color: #327695
    border-color: #8dc2e4
    background-color: #cadde9

.btn-twitter:active
    background: #cadde9
    -webkit-box-shadow: inset 0 1px 0 #bbd6e7
    box-shadow: inset 0 1px 0 #bbd6e7

// Icon

.btn-twitter:before
    margin: 0 0.6em 0 -0.6em
    background-position: -22px 0

.btn-twitter.large:before
    background-position: -36px -22px