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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                h1 Img Reference
  img(src="https://assets.codepen.io/522641/image.png")
.buttons-container
  h1 Buttons - Live CSS Version
  .all-buttons
    button.button button
    button.button.hover button hover
    button.button.active button active
    button.button.disabled button disabled
    button.button.green green
    button.button.green.hover green hover
    button.button.green.active green active
    button.button.green.disabled green disabled
    button.button.green.right green-right
    button.button.green.right.hover green-right hover
    button.button.green.right.active green-right active
    .nothing
    button.button.red red
    button.button.red.hover red hover
    button.button.red.active red active
    button.button.red.disabled red disabled
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700");

.button
  cursor pointer
   // color and property modifiers, have to be declared first
   // you'll have a better idea of what these need to be changed to than me
  --shadow-top #ccc
  --shadow-bot  #333
  --bg-color #888
  --fnt-col #1a1a1a
  --glow-color transparent
   // obviously change .hover to :hover when it's not being displayed
  &.hover
    --bg-color #e39827
    --shadow-top #c6b7a0
    --shadow-bot #5f4016
    --glow-color #644e2d
    --fnt-col #4a310a
  // same with .active and :active here
  &.active
    --bg-color #f1be64
    --shadow-top #7b6031
    --shadow-bot #303030
    --glow-color #3d2f16
    --shadow-bot #303030 
  &.disabled 
    --bg-color #3d3d3d 
    --shadow-top #272727 
    --shadow-bot #303030 
    --glow-color #272727 
    --fnt-col #7b7b7b 
    cursor not-allowed; 
  &.green 
    --bg-color #5eb663 
    --shadow-top #95c498 
    --shadow-bot #2a4b1c 
    --glow-color #365137 
    --fnt-col #182a1a 
    &.hover 
      --bg-color #92e897 
      --shadow-top #95c498 
      --shadow-bot #2a4b1c 
      --glow-color #365137 
      --fnt-col #030a04 
    &.active 
      --bg-color #cfdf93 
      --shadow-top #9fab6f 
      --shadow-bot #a8b774 
      --glow-color #0e110a 
      --fnt-col #0e110a 
    &.disabled 
      --bg-color #002b02 
      --shadow-top #002201 
      --shadow-bot #012501 
      --glow-color #0e110a
      --fnt-col #356b39 
  &.red 
    --bg-color #fe5a5a 
    --shadow-top #e08484 
    --shadow-bot #712d2d 
    --glow-color #262626 
    --fnt-col #182a1a 
    &.hover 
      --bg-color #ff9b9b
      --shadow-top #c9adad 
      --shadow-bot #712d2d 
      --glow-color #523030 
      --fnt-col #182a1a 
    &.active 
      --bg-color #fca8a8 
      --shadow-top #945959 
      --shadow-bot #3e2727 
      --glow-color #272727 
      --fnt-col #182a1a 
    &.disabled 
      --bg-color #571f1f 
      --shadow-top #2e1616 
      --shadow-bot #411818 
      --glow-color #262727 
      --fnt-col #8b4d4d 
      
  // regular properties
  position relative      
  border 0
  overflow hidden
  padding 12px
  font-size 1em
  font-weight 600
  text-align left
  box-sizing: border-box;
  border-radius 5px
  width 188px
  margin-bottom 10px
  font-family: "Open Sans", sans-serif
  // controls the bottom shadow, adjust the values to make the shadow bigger or sharper
  box-shadow inset 2px -2px 2px 2px var(--shadow-bot);  
  filter drop-shadow(0 0 5px var(--glow-color))
  background-color var(--bg-color)
  color var(--fnt-col)  
  cursor pointer
  &::before
    content ''
    width 100%
    height 50%
    background red
    box-shadow 4px 3px 2px 2px var(--shadow-top);
    border 0
    position absolute
    top -50%
    left 0
    pointer-events none
    cursor pointer
  &.right
    text-align right    
    clip-path: polygon(94% 0, 100% 50%, 94% 100%, 0 100%, 0 0);    
    background-image linear-gradient(to right, var(--bg-color) 0%, var(--bg-color) calc(100% - 16px), transparent calc(100% - 16px))
    padding-right 32px
    width 200px
    &::before 
      width calc(100% - 16px)
    &::after
      content ''
      position absolute
      height 100%
      width 30%
      right -2px
      top 0
      background linear-gradient(to bottom, var(--shadow-top) 0%, var(--shadow-top) 45%, var(--shadow-bot) 55%, var(--shadow-bot) 100%)
      clip-path: polygon(68% 0, 70% 0%, 100% 46%, 70% 100%, 68% 100%, 90% 46%);
      mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
      pointer-events none  
      cursor pointer

// nonsence for making the demo presentable
body
  background-color #2
  display flex
  color #eeeecc
*
  box-sizing border-box
.buttons-container
  width 900px
  background #333
  font-family: "Open Sans", sans-serif;
  padding 10px
  h1
    color #eeeecc
.all-buttons
  display grid
  grid-template-columns 1fr 1fr 1fr 1fr
  width 100%  
  background #444
  border-radius 5px
  border 4px #2b2b2b inset
  padding 10px
              
            
!

JS

              
                
              
            
!
999px

Console