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.

              button.btn Click Me

    p I am a modal! 
    p Click anywhere to close me!
              $primary_color = #da513d

html, body
  width 100%
  height 100%

  display flex
  font-size: 1.5
  align-items center
  justify-content center
  background $primary_color
  font-family Lato, sans-serif
  display block
  padding 1em 2em
  background transparent
  color #fff
  border 1px solid #fff
  outline 0
  text-transform uppercase
  cursor pointer
  transition .3s ease
  -webkit-appearance none
    background white
    color $primary_color
  opacity 0
  visibility hidden
  display flex
  align-items center
  justify-content center
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0,0,0,0.7)
  transition .3s ease-in-out
    padding 1em
    background white
    box-shadow 0 0 10px 0 rgba(0,0,0,0.2)
    text-align center
    transition all .3s cubic-bezier(.20,.90,.30,1.5)
    transform rotate(5deg) translate(-1em,1em)
    border-top 5px solid $primary_color
    border-bottom 5px solid #ddd
/* modal magic */
.btn:focus + .modal
  opacity 1
  visibility visible
    transform rotate(0deg) translate(0,0)
Loading ..................