cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              body
  div.btn-bg.bg-1
    .btn.btn-1
      h2 ocean
      button(href='#')
        | click on me!
  div.btn-bg.bg-2
    .btn.btn-2
      h2 leaf
      button(href='#')
        | It Growth
  div.btn-bg.bg-3
    .btn.btn-3
      h2 Sand
      button(href='#')
        | flow away
  div.btn-bg.bg-4
    .btn.btn-4
      h2 Fire
      button(href='#')
        | on the flame
  div.btn-bg.bg-5
    .btn.btn-5
      h2 Windy
      button(href='#')
        | raining drop
  div.btn-bg.bg-6
    .btn.btn-6
      h2 mamba
      button(href='#')
        a
          | long night
  div.btn-bg.bg-1
    .btn.btn-1
      h2 If you like it
      a(href='http://lichin.me')
        button
          | view my Blog!
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,300italic,400italic,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
aqur-color = #C7F8F9
aqur-bg = #6AB1C9
grass-color = #D0F9C7
grass-bg = #78C98D
sand-color = #F6F7C5
sand-bg = #E5D272
fire-color = #EDA39A
fire-bg = #ED6A5A
fire-active=#ED412A
cloud-color=#C4C0C0
cloud-bg = #ffffff
witch-color=#D3B7F7
witch-bg=#AC7EE5
witch-active=#8460AF
body
  padding 0
  margin 0
  .btn-bg
    width 100%
    height 50vh
    display flex
    flex-direction column
    align-items center
    justify-content center
    &.bg-1
      background aqur-bg
      .btn-1
        button
          color aqur-color
          background transparent
          border 3px solid aqur-color
          border-radius 5px
          -webkit-transition all .5s ease
          transition all .5s ease
          -webkit-transform translate(0, 0)
          transform translate(0, 0)
          a
            color aqur-color
          &:hover
            background aqur-color
            color aqur-bg
            border 3px solid aqur-bg
            -webkit-transition all .35s ease
            transition all .35s ease
            >a
              color aqur-bg
              -webkit-transition all .35s ease
              transition all .35s ease
          &:active
            -webkit-transform translate(5px, 5px)
            transform translate(5px, 5px)
            
            
    &.bg-2
      background grass-bg
      .btn-2
        button
          color grass-bg
          background grass-color 
          border none
          -webkit-transition all .7s ease
          transition all .7s ease
          &:hover
            background transparent
            color grass-color 
            &:before , &:after
              -webkit-transition all .7s ease
              transition all .7s ease
              width 100%
          &:before , &:after
            content ''
            position absolute
            top 0
            left 0px
            width 0px
            height 3px
            background grass-color 
            transition all .4s ease
          &:after
            top inherit
            left inherit
            bottom 0
            right 0
            
            
    &.bg-3
      background sand-bg
      .btn-3
        button
          color sand-bg
          background sand-color
          border none
          -webkit-transition all 1s ease
          transition all 1s ease
          &:hover
            -webkit-transition all .7s ease
            transition all .7s ease
            background transparent
            color sand-color
            &:after
              transition all .3s ease
              width 100% 
              left 0
          &:after
            position absolute
            transition all .3s ease
            content ''
            width 0
            bottom 0
            left inherit
            right 0
            height 3px
            background sand-color
    &.bg-4
      background fire-bg
      .btn-4
        button
          color fire-color
          border-radius 5px
          background radial-gradient(circle,fire-active 0.25em, transparent 0.25em) center/1.2em 1.2em
          border 3px solid fire-active
          -webkit-transition all .3s ease
          transition all .3s ease
          &:hover
            color white
            background radial-gradient(circle, fire-active 0.25em, transparent 0.25em) center/0.1em 0.1em
            -webkit-transition all .5s ease 
            transition all .5s ease 
    &.bg-5
      background cloud-bg
      .btn-5
        h2
          color cloud-color
        button
          color cloud-color
          background transparent
          border 3px solid cloud-color
          border-radius 5px
          -webkit-transition all .25s ease
          transition all .25s ease
          &:hover
            border-color #50514f
            color #50514f
            background-image repeating-linear-gradient(-25deg, cloud-color, cloud-color 3px, transparent 4px, transparent 7px)
            background-size 12px 16px
            -webkit-animation cloud-animation 1.25s infinite ease
            animation cloud-animation 1.25s infinite ease
            -webkit-animation-delay 0
            -webkit-transition all .25s ease
            transition all .25s ease
    &.bg-6
      background witch-bg
      .btn-6
        button
          width 11em
          height 3em
          color witch-color
          background transparent
          border 3px solid witch-color
          border-radius 5px
          -webkit-transition border 0.5s ease-out
          transition border 0.5s ease-out
          transition-delay .8s
          a
            position absolute
            z-index 2
            left 43px
            top 17px
          &::before,&::after
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            margin auto
            content 'LONG NIGHT'
            border-radius 50%
            display block
            width 22em
            height 22em
            left -5.5em
            text-align center
            -webkit-transition box-shadow .5s ease-out
            transition box-shadow .5s ease-out
            transition-delay .75s
            -webkit-transition-delay .75s  
            z-index 1 
          &::after
            transition-delay .25s
            -webkit-transition-delay .25s
          &:hover
            color white
            border-color witch-active
            animation witch-word-color 1.5s ease
            -webkit-transition border .2s ease
            transition border .2s ease
            &::before
              box-shadow inset 0 0 0 11em #B657E5
              transition-delay .05s
            &::after
              box-shadow inset 0 0 0 11em witch-active
              transition-delay .5s
@keyframes cloud-animation
    100%
      background-position  0px 2em
@keyframes witch-word-color
    0%
      color witch-color
    50%
      color #50514f
    100%
      color white
.btn
  margin 0 auto 30px auto
  //overflow hidden
  display block
h2
  text-align center  
  font-family 'Raleway'
  font-weight 600
  color white
  //text-transform uppercase
button 
  cursor pointer
  overflow hidden
  outline none
  color #fff
  position relative
  letter-spacing 0.1em 
  font-weight 400
  padding 1rem 3rem 1rem 3rem
  text-transform uppercase
  font-family "Lato"
  font-size 1.5em
  a
    text-decoration none
            
          
!
999px
Loading ..................

Console