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

              
                <h2>Buttons</h2>
<h3>A CSS styling project - styling an element to make it look like a clickable button. Uses Stylus CSS pre-processor.</h3>
<p>Normal buttons:</p>
    <div class="button ">neutral</div>
    <div class="button btn-brand">brand</div>
    <div class="button btn-success">success</div>
    <div class="button btn-warning">warning</div>
    <div class="button btn-danger">danger</div>

    <p>Inverted buttons:</p>
    <div class="button  btn-inverted">neutral</div>
    <div class="button btn-brand btn-inverted">brand</div>
    <div class="button btn-success btn-inverted">success</div>
    <div class="button btn-warning btn-inverted">warning</div>
    <div class="button btn-danger btn-inverted">danger</div>

    <p>Disabled buttons:</p>
    <div class="button btn-disabled">neutral</div>
    <div class="button btn-brand btn-disabled">brand</div>
    <div class="button btn-success btn-disabled">success</div>
    <div class="button btn-warning btn-disabled">warning</div>
    <div class="button btn-danger btn-disabled">danger</div>

    <p>Small (SM) and extra small (XS) buttons:</p>
    <div class="button sm btn-brand">small</div>
    <div class="button xs">xs</div>

    <p>Micro button: XS + no min width</p>
    <div class="button xs btn-no-width">z</div>

    <p>Large button (LG), large disabled button:</p>
    <div class="button lg btn-success">large</div>
    <div class="button lg btn-warning btn-disabled">large disabled</div>

    <p>Buttons without fixed width:</p>
    <div class="button btn-danger btn-no-width">very loooooooooooong button</div>
    <div class="button btn-no-width">a</div><span> very short button</span>

    <p>Link as a button:</p>
    <a class="button" href="#" target="_blank">new window</a>

    <p>Button that takes entire row:</p>
    <div class="button btn-full-width">button that takes up entire row</div>

    <p>Inactive buttons:</p>
    <div class="button btn-inactive">inactive</div>
    <div class="button btn-inactive btn-danger">danger inactive</div>

    <p>this button imitates text:
        <span class="button btn-as-text">button as text</span>
    </p>
              
            
!

CSS

              
                // extra
body {
	width: 650px;
	margin: 20px auto;
}
h2, h3 {
	text-align: center;
}

// button name prefix for extra classes
button-prefix = 'btn-'

// size parameters
btn-display = inline-block
btn-width = 100px
btn-height = 30px
btn-padding = 0 10px

// background for default "neutral" button
neutral-color = #F5F5F5
neutral-gradient = linear-gradient(#f5f5f5, #cecece);
darker-gradient = linear-gradient(
	darken(#f5f5f5, 5%),
	darken(#e3e3e3, 5%) 50%,
	darken(#cecece, 10%))
// inverted buttons have neutral background and colored text, border
inverted-background = #FCFCFC
disabled-opacity = 0.3
// default border color for styles = background color
dark-border = #aaa

// font settings
dark-text = #111
light-text = #fff
btn-font-size = 14px
btn-font-weight = bold
btn-align = center

// borders
btn-border-width = 1px
btn-border-style = solid
btn-border-radius = 5px

//sizes
xs = {
	name: 'xs',
	modifier: 0.6
}
sm = {
	name: 'sm',
	modifier: 0.8
}
lg = {
	name: 'lg',
	modifier: 1.4
}
sizes = xs, sm, lg

// names and background colors for extra styles
brand = {
	name: 'brand',
	background-color: #1976D2,
} 
success = {
	name: 'success',
	background-color: #2E7D32
}
warning = {
	name: 'warning',
	background-color: #FFB300
}
danger = {
	name: 'danger',
	background-color: #F44336
}
styles = brand, success, warning, danger


// takes background color, returns text color
select-text-color(background) {
	if (lightness(background) > 60) {
    return dark-text; // dark text for light background
  } else {
    return light-text; // light text for dark background
  }
}

pick-border-color(col) {
  if(lightness(col) > 60) {
    return dark-border;
  } else {
    return col;
  }
}

.button {
	display: btn-display
	width: btn-width
	height: btn-height
	padding: btn-padding;
	font-size: btn-font-size
	line-height: @height
	font-weight: btn-font-weight
	text-decoration: none
	text-align: btn-align
	color: select-text-color(neutral-color)
	background: neutral-color
	background: neutral-gradient
	border-width: btn-border-width
	border-style: btn-border-style
	border-color: pick-border-color(neutral-color)
	border-radius btn-border-radius
	box-shadow:	0px 1px 3px rgba(000,000,000,0.4)
	cursor: pointer
	overflow: hidden
	&:hover {
		background: darken(neutral-color, 10%)
		background: darker-gradient
		box-shadow:	0px 1px 3px rgba(000,000,000,0.5)
	}
	&:hover&:active {
		position: relative
		top: 2px
		box-shadow: 0px 0px 2px rgba(000,000,000,0.5)
	}
	
	// loop through sizes and add size classes
	for size in sizes {
		&.{size.name} {
			width: @width * size.modifier
			height: @height * size.modifier
			padding: btn-padding[0]*size.modifier btn-padding[1]*size.modifier
			font-size: @font-size * size.modifier
			line-height: @height
		}
	}
	&.{button-prefix}no-width {
		width: auto
	}
	&.{button-prefix}full-width {
		display: block
		width: auto
	}

	// button as text
	&.{button-prefix}as-text {
		display: inline;
		background: transparent;
		border: none;
		text-decoration: inherit;
		box-shadow: none;
		&:hover&:active {
			box-shadow: none;
		}
		&.{button-prefix}disabled {
			&:hover&:active {
				position: static
				box-shadow: none
			}
		}
	}
	
	// disabled/inactive default button
	&.{button-prefix}inactive {
		box-shadow: none
		&:hover {
			background: neutral-color
			background: neutral-gradient
			cursor: default
			box-shadow: none
		}
		&:hover&:active {
			position: static
			box-shadow: none
		}
	}
	&.{button-prefix}disabled {
		opacity: disabled-opacity
		box-shadow: none
		&:hover {
			background: neutral-color
			background: neutral-gradient
			cursor: default
			box-shadow: none
		}
		&:hover&:active {
			position: static
			box-shadow: none
		}
	}
	
	// loop through styles (colors)
	for s in styles {
		&.{button-prefix}{s.name} {
			background: s.background-color
			border: 1px solid s.background-color
			color: select-text-color(s.background-color)
			&:hover {
				background: darken(s.background-color, 20%)
				border-color: darken(s.background-color, 20%)
			}
			// styled inverted button
			&.{button-prefix}inverted {
				color: s.background-color
				&:hover {
					background: darken(inverted-background, 5%)
				}
			}
			
			// disabled styled button
			&.{button-prefix}disabled {
				&:hover {
					background: s.background-color
				}
			}
			
			// inactive styled button
			&.{button-prefix}inactive {
				&:hover {
					background: s.background-color
				}
			}
		}
	}

	// inverted 'neutral' button
	&.{button-prefix}inverted {
		background: inverted-background
		color: dark-text
		&:hover {
			background: darken(inverted-background, 5%)
		}
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console