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

              
                <div class="calculator">
   <div class="calculator__screen">
      <h6 class="calculator__operation">1258 + 963</h6>
      <h5 class="calculator__result">2194</h5>
   </div>
   <div class="calculator__buttons">
      <button class="btn highlight">C</button>
      <button class="btn highlight">÷</button>
      <button class="btn highlight">x</button>
      <button class="btn">
         <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.141 1.2L1.67588 6L6.141 10.8H18.75V1.2H6.141ZM5.5814 12L0 6L5.5814 0H20V12H5.5814Z" fill="#6B8AFA"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.17574 3.17574C9.41005 2.94142 9.78995 2.94142 10.0243 3.17574L14.8243 7.97574C15.0586 8.21005 15.0586 8.58995 14.8243 8.82426C14.5899 9.05858 14.2101 9.05858 13.9757 8.82426L9.17574 4.02426C8.94142 3.78995 8.94142 3.41005 9.17574 3.17574Z" fill="#6B8AFA"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8243 3.17574C14.5899 2.94142 14.2101 2.94142 13.9757 3.17574L9.17574 7.97574C8.94142 8.21005 8.94142 8.58995 9.17574 8.82426C9.41005 9.05858 9.78995 9.05858 10.0243 8.82426L14.8243 4.02426C15.0586 3.78995 15.0586 3.41005 14.8243 3.17574Z" fill="#6B8AFA"/>
         </svg>
      </button>
      <button class="btn">7</button>
      <button class="btn">8</button>
      <button class="btn">9</button>
      <button class="btn highlight">-</button>
      <button class="btn">4</button>
      <button class="btn">5</button>
      <button class="btn">6</button>
      <button class="btn highlight">+</button>
      <button class="btn">1</button>
      <button class="btn">2</button>
      <button class="btn">3</button>
      <button class="btn equal">=</button>
      <button class="btn">%</button>
      <button class="btn">0</button>
      <button class="btn">.</button>
   </div>
</div>
              
            
!

CSS

              
                $text-color: #699AB6
$text-color-highlight: #6B8AFA
$bg: #E8F5FC
$button-size: 44px

$normal-shadow: 6px 6px 10px rgba(darken($bg, 15%), 0.5), -6px -6px 10px rgba(lighten($bg, 50%), 0.6)
$pressed-shadow: inset 6px 6px 10px rgba(darken($bg, 15%), 0.5), inset -6px -6px 10px rgba(lighten($bg, 50%), 0.6)
$active-shadow: 6px 6px 10px rgba(darken($bg, 15%), 0.5), -6px -6px 10px rgba(lighten($bg, 50%), 0.6), inset 6px 6px 10px rgba(darken($bg, 15%), 0.5), inset -6px -6px 10px rgba(lighten($bg, 50%), 0.6)

body
   display: flex
   justify-content: center
   align-items: center
   min-height: 100vh
   background-color: $bg
   padding: 1rem
   color: $text-color
   
.calculator
   padding: 32px 24px
   width: 240px
   background-color: $bg
   box-shadow: $normal-shadow
   border-radius: 16px
   &__screen
      text-align: right
      padding: 12px 8px
      border-radius: 6px
      background-color: darken($bg, 1%)
      box-shadow: $pressed-shadow
      margin-bottom: 24px
   &__operation
      margin: 0 0 8px 0
      font-weight: 500
      font-size: 16px
      letter-spacing: 2px
   &__result
      font-size: 24px
      margin: 0
      font-weight: 600
      color: $text-color-highlight
      letter-spacing: 2px
   &__buttons
      display: grid
      grid-gap: 16px 12px
      grid-template-columns: repeat(4, $button-size)
      grid-template-rows: repeat(5, $button-size)
      justify-content: center
      .btn
         background-color: $bg
         box-shadow: $normal-shadow
         border: none
         border-radius: 100%
         cursor: pointer
         user-select: none
         outline: none
         color: $text-color
         font-weight: 500
         &:hover
            background-color: darken($bg, 2%)
         &:active:focus
            box-shadow: $pressed-shadow
         &:focus
            box-shadow: $active-shadow
         &.equal
            background-color: $text-color-highlight
            color: white
            box-shadow: 3px 11px 25px rgba(darken($text-color-highlight, 12%), 0.6), -6px -6px 10px rgba(255, 255, 255, 0.6), inset -3px -3px 14px rgba(255, 255, 255, 0.2), inset 8px 8px 14px rgba(darken($text-color-highlight, 12%), 0.5)
            grid-row-start: span 2
            grid-column-start: 4
            border-radius: 50px
            &:hover
               background-color: darken($text-color-highlight, 5%)
            &:active:focus, &:focus
               box-shadow: 3px 11px 25px rgba(darken($text-color-highlight, 20%), 0.6), -6px -6px 10px rgba(lighten($text-color-highlight, 30%), 0.9), inset 3px 11px 15px rgba(darken($text-color-highlight, 20%), 0.5), inset -6px -6px 8px rgba(lighten($text-color-highlight, 20%), 0.5)
         &.highlight
            color: $text-color-highlight
              
            
!

JS

              
                
              
            
!
999px

Console