Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
  .row
    .col-sm-4.social-buttons
      h3 social links
      a.btn.btn-block.btn-social.btn-bitbucket
        i.fa.fa-bitbucket
        |  Sign in with Bitbucket
      a.btn.btn-block.btn-social.btn-dropbox
        i.fa.fa-dropbox
        |  Sign in with Dropbox
      a.btn.btn-block.btn-social.btn-facebook
        i.fa.fa-facebook
        |  Sign in with Facebook
      a.btn.btn-block.btn-social.btn-flickr
        i.fa.fa-flickr
        |  Sign in with Flickr
      a.btn.btn-block.btn-social.btn-github
        i.fa.fa-github
        |  Sign in with GitHub
      a.btn.btn-block.btn-social.btn-google-plus
        i.fa.fa-google-plus
        |  Sign in with Google
      a.btn.btn-block.btn-social.btn-instagram
        i.fa.fa-instagram
        |  Sign in with Instagram
      a.btn.btn-block.btn-social.btn-linkedin
        i.fa.fa-linkedin
        |  Sign in with LinkedIn
      a.btn.btn-block.btn-social.btn-pinterest
        i.fa.fa-pinterest
        |  Sign in with Pinterest
      a.btn.btn-block.btn-social.btn-tumblr
        i.fa.fa-tumblr
        |  Sign in with Tumblr
      a.btn.btn-block.btn-social.btn-twitter
        i.fa.fa-twitter
        |  Sign in with Twitter
      a.btn.btn-block.btn-social.btn-vk
        i.fa.fa-vk
        |  Sign in with VK
      hr
      .text-center
        a.btn.btn-social-icon.btn-bitbucket
          i.fa.fa-bitbucket
        a.btn.btn-social-icon.btn-dropbox
          i.fa.fa-dropbox
        a.btn.btn-social-icon.btn-facebook
          i.fa.fa-facebook
        a.btn.btn-social-icon.btn-flickr
          i.fa.fa-flickr
        a.btn.btn-social-icon.btn-github
          i.fa.fa-github
        a.btn.btn-social-icon.btn-google-plus
          i.fa.fa-google-plus
        a.btn.btn-social-icon.btn-instagram
          i.fa.fa-instagram
        a.btn.btn-social-icon.btn-linkedin
          i.fa.fa-linkedin
        a.btn.btn-social-icon.btn-pinterest
          i.fa.fa-pinterest
        a.btn.btn-social-icon.btn-tumblr
          i.fa.fa-tumblr
        a.btn.btn-social-icon.btn-twitter
          i.fa.fa-twitter
        a.btn.btn-social-icon.btn-vk
          i.fa.fa-vk
    .col-sm-4
      h3 Classes
      ul.social-class.list-unstyled
        li(data-code='bitbucket', data-name='Bitbucket')
          code btn-bitbucket
          span.social-hex #205081
        li(data-code='dropbox', data-name='Dropbox')
          code btn-dropbox
          span.social-hex #1087DD
        li(data-code='facebook', data-name='Facebook')
          code btn-facebook
          span.social-hex #3B5998
        li(data-code='flickr', data-name='Flickr')
          code btn-flickr
          span.social-hex #2BA9E1
        li(data-code='github', data-name='GitHub')
          code btn-github
          span.social-hex #444444
        li(data-code='google-plus', data-name='Google')
          code btn-google-plus
          span.social-hex #517FA4
        li(data-code='instagram', data-name='Instagram')
          code btn-instagram
          span.social-hex #DD4B39
        li(data-code='linkedin', data-name='LinkedIn')
          code btn-linkedin
          span.social-hex #007BB6
        li(data-code='pinterest', data-name='Pinterest')
          code btn-pinterest
          span.social-hex #4875B4
        li(data-code='tumblr', data-name='Tumblr')
          code btn-tumblr
          span.social-hex #CB2027
        li(data-code='twitter', data-name='Twitter')
          code btn-twitter
          span.social-hex #2C4762
        li(data-code='vk', data-name='VK')
          code btn-vk
          span.social-hex #587EA3
    .col-sm-4
      .social-sizes
        h3 Sizes
        a.btn.btn-block.btn-social.btn-lg.btn-google-plus
          i.fa.fa-google-plus
          |           Sign in with Google
        a.btn.btn-block.btn-social.btn-google-plus
          i.fa.fa-google-plus
          |           Sign in with Google
        a.btn.btn-block.btn-social.btn-sm.btn-google-plus
          i.fa.fa-google-plus
          |           Sign in with Google
        a.btn.btn-block.btn-social.btn-xs.btn-google-plus
          i.fa.fa-google-plus
          |           Sign in with Google
        hr
        .text-center
          a.btn.btn-social-icon.btn-lg.btn-google-plus
            i.fa.fa-google-plus
          a.btn.btn-social-icon.btn-google-plus
            i.fa.fa-google-plus
          a.btn.btn-social-icon.btn-sm.btn-google-plus
            i.fa.fa-google-plus
          a.btn.btn-social-icon.btn-xs.btn-google-plus
            i.fa.fa-google-plus

              
            
!

CSS

              
                body
    background-color #121212
    color #fff

.btn-social
    position relative
    padding-left 44px
    text-align left
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    :first-child
        position absolute
        left 0
        top 0
        bottom 0
        width 32px
        line-height 34px
        font-size 1.6em
        text-align center
        border-right 1px solid rgba(0,0,0,0.2)
    &.btn-lg
        padding-left 61px
        :first-child
            line-height 45px
            width 45px
            font-size 1.8em
    &.btn-sm
        padding-left 38px
        :first-child
            line-height 28px
            width 28px
            font-size 1.4em
    &.btn-xs
        padding-left 30px
        :first-child
            line-height 20px
            width 20px
            font-size 1.2em

.btn-social-icon
    position relative
    padding-left 44px
    text-align left
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    height 34px
    width 34px
    padding-left 0
    padding-right 0
    margin-bottom 4px
    :first-child
        position absolute
        left 0
        top 0
        bottom 0
        width 32px
        line-height 34px
        font-size 1.6em
        text-align center
        border-right 1px solid rgba(0,0,0,0.2)
        border none
        text-align center
        width 100% !important
    &.btn-lg
        padding-left 61px
        height 45px
        width 45px
        padding-left 0
        padding-right 0
        :first-child
            line-height 45px
            width 45px
            font-size 1.8em
    &.btn-sm
        padding-left 38px
        height 30px
        width 30px
        padding-left 0
        padding-right 0
        :first-child
            line-height 28px
            width 28px
            font-size 1.4em
    &.btn-xs
        padding-left 30px
        height 22px
        width 22px
        padding-left 0
        padding-right 0
        :first-child
            line-height 20px
            width 20px
            font-size 1.2em

.btn-bitbucket
    color #fff
    background-color #205081
    border-color rgba(0,0,0,0.2)

.btn-bitbucket:hover,
.btn-bitbucket:focus,
.btn-bitbucket:active,
.btn-bitbucket.active,
.open .dropdown-toggle.btn-bitbucket
    color #fff
    background-color #183c60
    border-color rgba(0,0,0,0.2)

.btn-bitbucket:active,
.btn-bitbucket.active,
.open .dropdown-toggle.btn-bitbucket
    background-image none

.btn-bitbucket.disabled,
.btn-bitbucket[disabled],
fieldset[disabled] .btn-bitbucket,
.btn-bitbucket.disabled:hover,
.btn-bitbucket[disabled]:hover,
fieldset[disabled] .btn-bitbucket:hover,
.btn-bitbucket.disabled:focus,
.btn-bitbucket[disabled]:focus,
fieldset[disabled] .btn-bitbucket:focus,
.btn-bitbucket.disabled:active,
.btn-bitbucket[disabled]:active,
fieldset[disabled] .btn-bitbucket:active,
.btn-bitbucket.disabled.active,
.btn-bitbucket[disabled].active,
fieldset[disabled] .btn-bitbucket.active
    background-color #205081
    border-color rgba(0,0,0,0.2)

.btn-dropbox
    color #fff
    background-color #1087dd
    border-color rgba(0,0,0,0.2)

.btn-dropbox:hover,
.btn-dropbox:focus,
.btn-dropbox:active,
.btn-dropbox.active,
.open .dropdown-toggle.btn-dropbox
    color #fff
    background-color #0d70b7
    border-color rgba(0,0,0,0.2)

.btn-dropbox:active,
.btn-dropbox.active,
.open .dropdown-toggle.btn-dropbox
    background-image none

.btn-dropbox.disabled,
.btn-dropbox[disabled],
fieldset[disabled] .btn-dropbox,
.btn-dropbox.disabled:hover,
.btn-dropbox[disabled]:hover,
fieldset[disabled] .btn-dropbox:hover,
.btn-dropbox.disabled:focus,
.btn-dropbox[disabled]:focus,
fieldset[disabled] .btn-dropbox:focus,
.btn-dropbox.disabled:active,
.btn-dropbox[disabled]:active,
fieldset[disabled] .btn-dropbox:active,
.btn-dropbox.disabled.active,
.btn-dropbox[disabled].active,
fieldset[disabled] .btn-dropbox.active
    background-color #1087dd
    border-color rgba(0,0,0,0.2)

.btn-facebook
    color #fff
    background-color #3b5998
    border-color rgba(0,0,0,0.2)

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook
    color #fff
    background-color #30487b
    border-color rgba(0,0,0,0.2)

.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook
    background-image none

.btn-facebook.disabled,
.btn-facebook[disabled],
fieldset[disabled] .btn-facebook,
.btn-facebook.disabled:hover,
.btn-facebook[disabled]:hover,
fieldset[disabled] .btn-facebook:hover,
.btn-facebook.disabled:focus,
.btn-facebook[disabled]:focus,
fieldset[disabled] .btn-facebook:focus,
.btn-facebook.disabled:active,
.btn-facebook[disabled]:active,
fieldset[disabled] .btn-facebook:active,
.btn-facebook.disabled.active,
.btn-facebook[disabled].active,
fieldset[disabled] .btn-facebook.active
    background-color #3b5998
    border-color rgba(0,0,0,0.2)

.btn-flickr
    color #fff
    background-color #ff0084
    border-color rgba(0,0,0,0.2)

.btn-flickr:hover,
.btn-flickr:focus,
.btn-flickr:active,
.btn-flickr.active,
.open .dropdown-toggle.btn-flickr
    color #fff
    background-color #d6006f
    border-color rgba(0,0,0,0.2)

.btn-flickr:active,
.btn-flickr.active,
.open .dropdown-toggle.btn-flickr
    background-image none

.btn-flickr.disabled,
.btn-flickr[disabled],
fieldset[disabled] .btn-flickr,
.btn-flickr.disabled:hover,
.btn-flickr[disabled]:hover,
fieldset[disabled] .btn-flickr:hover,
.btn-flickr.disabled:focus,
.btn-flickr[disabled]:focus,
fieldset[disabled] .btn-flickr:focus,
.btn-flickr.disabled:active,
.btn-flickr[disabled]:active,
fieldset[disabled] .btn-flickr:active,
.btn-flickr.disabled.active,
.btn-flickr[disabled].active,
fieldset[disabled] .btn-flickr.active
    background-color #ff0084
    border-color rgba(0,0,0,0.2)

.btn-github
    color #fff
    background-color #444
    border-color rgba(0,0,0,0.2)

.btn-github:hover,
.btn-github:focus,
.btn-github:active,
.btn-github.active,
.open .dropdown-toggle.btn-github
    color #fff
    background-color #303030
    border-color rgba(0,0,0,0.2)

.btn-github:active,
.btn-github.active,
.open .dropdown-toggle.btn-github
    background-image none

.btn-github.disabled,
.btn-github[disabled],
fieldset[disabled] .btn-github,
.btn-github.disabled:hover,
.btn-github[disabled]:hover,
fieldset[disabled] .btn-github:hover,
.btn-github.disabled:focus,
.btn-github[disabled]:focus,
fieldset[disabled] .btn-github:focus,
.btn-github.disabled:active,
.btn-github[disabled]:active,
fieldset[disabled] .btn-github:active,
.btn-github.disabled.active,
.btn-github[disabled].active,
fieldset[disabled] .btn-github.active
    background-color #444
    border-color rgba(0,0,0,0.2)

.btn-google-plus
    color #fff
    background-color #dd4b39
    border-color rgba(0,0,0,0.2)

.btn-google-plus:hover,
.btn-google-plus:focus,
.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus
    color #fff
    background-color #ca3523
    border-color rgba(0,0,0,0.2)

.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus
    background-image none

.btn-google-plus.disabled,
.btn-google-plus[disabled],
fieldset[disabled] .btn-google-plus,
.btn-google-plus.disabled:hover,
.btn-google-plus[disabled]:hover,
fieldset[disabled] .btn-google-plus:hover,
.btn-google-plus.disabled:focus,
.btn-google-plus[disabled]:focus,
fieldset[disabled] .btn-google-plus:focus,
.btn-google-plus.disabled:active,
.btn-google-plus[disabled]:active,
fieldset[disabled] .btn-google-plus:active,
.btn-google-plus.disabled.active,
.btn-google-plus[disabled].active,
fieldset[disabled] .btn-google-plus.active
    background-color #dd4b39
    border-color rgba(0,0,0,0.2)

.btn-instagram
    color #fff
    background-color #517fa4
    border-color rgba(0,0,0,0.2)

.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active,
.btn-instagram.active,
.open .dropdown-toggle.btn-instagram
    color #fff
    background-color #446a89
    border-color rgba(0,0,0,0.2)

.btn-instagram:active,
.btn-instagram.active,
.open .dropdown-toggle.btn-instagram
    background-image none

.btn-instagram.disabled,
.btn-instagram[disabled],
fieldset[disabled] .btn-instagram,
.btn-instagram.disabled:hover,
.btn-instagram[disabled]:hover,
fieldset[disabled] .btn-instagram:hover,
.btn-instagram.disabled:focus,
.btn-instagram[disabled]:focus,
fieldset[disabled] .btn-instagram:focus,
.btn-instagram.disabled:active,
.btn-instagram[disabled]:active,
fieldset[disabled] .btn-instagram:active,
.btn-instagram.disabled.active,
.btn-instagram[disabled].active,
fieldset[disabled] .btn-instagram.active
    background-color #517fa4
    border-color rgba(0,0,0,0.2)

.btn-linkedin
    color #fff
    background-color #007bb6
    border-color rgba(0,0,0,0.2)

.btn-linkedin:hover,
.btn-linkedin:focus,
.btn-linkedin:active,
.btn-linkedin.active,
.open .dropdown-toggle.btn-linkedin
    color #fff
    background-color #005f8d
    border-color rgba(0,0,0,0.2)

.btn-linkedin:active,
.btn-linkedin.active,
.open .dropdown-toggle.btn-linkedin
    background-image none

.btn-linkedin.disabled,
.btn-linkedin[disabled],
fieldset[disabled] .btn-linkedin,
.btn-linkedin.disabled:hover,
.btn-linkedin[disabled]:hover,
fieldset[disabled] .btn-linkedin:hover,
.btn-linkedin.disabled:focus,
.btn-linkedin[disabled]:focus,
fieldset[disabled] .btn-linkedin:focus,
.btn-linkedin.disabled:active,
.btn-linkedin[disabled]:active,
fieldset[disabled] .btn-linkedin:active,
.btn-linkedin.disabled.active,
.btn-linkedin[disabled].active,
fieldset[disabled] .btn-linkedin.active
    background-color #007bb6
    border-color rgba(0,0,0,0.2)

.btn-pinterest
    color #fff
    background-color #cb2027
    border-color rgba(0,0,0,0.2)

.btn-pinterest:hover,
.btn-pinterest:focus,
.btn-pinterest:active,
.btn-pinterest.active,
.open .dropdown-toggle.btn-pinterest
    color #fff
    background-color #a81a20
    border-color rgba(0,0,0,0.2)

.btn-pinterest:active,
.btn-pinterest.active,
.open .dropdown-toggle.btn-pinterest
    background-image none

.btn-pinterest.disabled,
.btn-pinterest[disabled],
fieldset[disabled] .btn-pinterest,
.btn-pinterest.disabled:hover,
.btn-pinterest[disabled]:hover,
fieldset[disabled] .btn-pinterest:hover,
.btn-pinterest.disabled:focus,
.btn-pinterest[disabled]:focus,
fieldset[disabled] .btn-pinterest:focus,
.btn-pinterest.disabled:active,
.btn-pinterest[disabled]:active,
fieldset[disabled] .btn-pinterest:active,
.btn-pinterest.disabled.active,
.btn-pinterest[disabled].active,
fieldset[disabled] .btn-pinterest.active
    background-color #cb2027
    border-color rgba(0,0,0,0.2)

.btn-tumblr
    color #fff
    background-color #2c4762
    border-color rgba(0,0,0,0.2)

.btn-tumblr:hover,
.btn-tumblr:focus,
.btn-tumblr:active,
.btn-tumblr.active,
.open .dropdown-toggle.btn-tumblr
    color #fff
    background-color #1f3346
    border-color rgba(0,0,0,0.2)

.btn-tumblr:active,
.btn-tumblr.active,
.open .dropdown-toggle.btn-tumblr
    background-image none

.btn-tumblr.disabled,
.btn-tumblr[disabled],
fieldset[disabled] .btn-tumblr,
.btn-tumblr.disabled:hover,
.btn-tumblr[disabled]:hover,
fieldset[disabled] .btn-tumblr:hover,
.btn-tumblr.disabled:focus,
.btn-tumblr[disabled]:focus,
fieldset[disabled] .btn-tumblr:focus,
.btn-tumblr.disabled:active,
.btn-tumblr[disabled]:active,
fieldset[disabled] .btn-tumblr:active,
.btn-tumblr.disabled.active,
.btn-tumblr[disabled].active,
fieldset[disabled] .btn-tumblr.active
    background-color #2c4762
    border-color rgba(0,0,0,0.2)

.btn-twitter
    color #fff
    background-color #2ba9e1
    border-color rgba(0,0,0,0.2)

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter
    color #fff
    background-color #1c92c7
    border-color rgba(0,0,0,0.2)

.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter
    background-image none

.btn-twitter.disabled,
.btn-twitter[disabled],
fieldset[disabled] .btn-twitter,
.btn-twitter.disabled:hover,
.btn-twitter[disabled]:hover,
fieldset[disabled] .btn-twitter:hover,
.btn-twitter.disabled:focus,
.btn-twitter[disabled]:focus,
fieldset[disabled] .btn-twitter:focus,
.btn-twitter.disabled:active,
.btn-twitter[disabled]:active,
fieldset[disabled] .btn-twitter:active,
.btn-twitter.disabled.active,
.btn-twitter[disabled].active,
fieldset[disabled] .btn-twitter.active
    background-color #2ba9e1
    border-color rgba(0,0,0,0.2)

.btn-vk
    color #fff
    background-color #587ea3
    border-color rgba(0,0,0,0.2)

.btn-vk:hover,
.btn-vk:focus,
.btn-vk:active,
.btn-vk.active,
.open .dropdown-toggle.btn-vk
    color #fff
    background-color #4a6a89
    border-color rgba(0,0,0,0.2)

.btn-vk:active,
.btn-vk.active,
.open .dropdown-toggle.btn-vk
    background-image none

.btn-vk.disabled,
.btn-vk[disabled],
fieldset[disabled] .btn-vk,
.btn-vk.disabled:hover,
.btn-vk[disabled]:hover,
fieldset[disabled] .btn-vk:hover,
.btn-vk.disabled:focus,
.btn-vk[disabled]:focus,
fieldset[disabled] .btn-vk:focus,
.btn-vk.disabled:active,
.btn-vk[disabled]:active,
fieldset[disabled] .btn-vk:active,
.btn-vk.disabled.active,
.btn-vk[disabled].active,
fieldset[disabled] .btn-vk.active
    background-color #587ea3
    border-color rgba(0,0,0,0.2)

.social-class
    .social-hex
        font-family Monaco, Menlo, Consolas, "Courier New", monospace
        font-size 10px
        opacity 0.3
        float right
    li
        margin-bottom 4px
        &:hover
            .social-hex
                opacity 1
            code
                background-color #e8e8ee
    code
        cursor default

::-webkit-scrollbar
    z-index 30
    width 5px
    height 0
    y-index hidden

::-webkit-scrollbar-track
    background-color #111
    border-radius 0

::-webkit-scrollbar-thumb
    background-color #2b2e33
    &:hover
        background-color transparent
              
            
!

JS

              
                $ ->
  all_classes = ''
  timer = undefined
  $.each $('li', '.social-class'), (index, element) ->
    all_classes += ' btn-' + $(element).data('code')
    return
  $('li', '.social-class').mouseenter ->
    icon_name = $(this).data('code')
    if $(this).data('icon')
      icon_name = $(this).data('icon')
    icon = '<i class=\'fa fa-' + icon_name + '\'></i>'
    $('.btn-social', '.social-sizes').html icon + 'Sign in with ' + $(this).data('name')
    $('.btn-social-icon', '.social-sizes').html icon
    $('.btn', '.social-sizes').removeClass all_classes
    $('.btn', '.social-sizes').addClass 'btn-' + $(this).data('code')
    return
  $($('li', '.social-class')[Math.floor($('li', '.social-class').length * Math.random())]).mouseenter()
  return
              
            
!
999px

Console