Babel includes JSX processing.
Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
.button This is a button
body //background-image: url('https://wallpaperbrowse.com/media/images/Background-4.jpg') background-size: cover text-align: center padding: 200px //There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it body::after content: "" background: url(https://wallpaperbrowse.com/media/images/Background-4.jpg) opacity: 0.7 top: 0 left: 0 bottom: 0 right: 0 position: absolute z-index: -1 .button display: inline-block background: transparent color: #fff font-weight: bold text-transform: uppercase padding: 20px 30px border: 3px solid #fff border-radius: 5px box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4) cursor: pointer transition: all ease-in-out 300ms &:hover background-color: #4285f4 box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.2) transform: translate(0px, -5px) scale(1.1)
Also see: Tab Triggers