Button Stuff

Button Stuff.markdown

Button Stuff

Just a few buttons that I'll keep adding ideas onto.

A Pen by Andrew Robinson on CodePen.

License.

index.html

.wrapper
	.button-wrapper
		.button.button1 BUTTON
	.button-wrapper
		.button.button2 BUTTON

style.css

body {
	background: whitesmoke;
}

.wrapper {
	display: flex;
	flex-direction: column;
}

.button-wrapper {
	width: 100vw;
	display: flex;
	justify-content: center;
	margin-bottom: 2vw;
	padding: 2vw 0;
	box-shadow: 0 1px rgba(0,0,0,0.2);
	&:first-child {
		margin-top: 5vw;
		background: white;
	}
	&:nth-child(2) {
		background: tomato;
	}
}

.button {
	font-size: 1.2vw;
	width: 10vw;
	height: 3vw;
	background: white;
	border: 4px solid black;
	box-shadow: 0 0 yellow,
							0 1px adjust-hue(yellow, 5%),
							0 2px adjust-hue(yellow, 10%),
							0 3px adjust-hue(yellow, 15%),
							0 4px adjust-hue(yellow, 20%);
	text-align: center;
	line-height: 3.1vw;
	font-weight: 900;
	letter-spacing: 0.3em;
	padding-left: 0.15em;
	cursor: pointer;
	&:hover {
		box-shadow: 0 0 yellow,
							0 1px adjust-hue(yellow, 5%),
							0 2px adjust-hue(yellow, 10%),
							0 3px adjust-hue(yellow, 15%),
							0 4px adjust-hue(yellow, 20%),
							0 8px 4px rgba(0,0,0,0.3);
	}
	&:active {
		box-shadow: 0 0 yellow,
							0 1px adjust-hue(yellow, 5%),
							0 2px adjust-hue(yellow, 10%),
							0 4px 2px rgba(0,0,0,0.6);
	}
}

.button.button1 {
	&:hover {
		transform: translate(0, -2px);
	}
	&:active {
		transform: translate(0,0);
	}
}

.button.button2 {
	color: yellow;
	background: blue;
	border: 4px solid yellow;
	box-shadow: 0 0 blue,
							0 1px adjust-hue(blue, 5%),
							0 2px adjust-hue(blue, 10%),
							0 3px adjust-hue(blue, 15%),
							0 4px adjust-hue(blue, 20%);
	&:hover {
		box-shadow: 0 0 blue,
							0 1px adjust-hue(blue, 5%),
							0 2px adjust-hue(blue, 10%),
							0 3px adjust-hue(blue, 15%),
							0 4px adjust-hue(blue, 20%);
		transform: scale(1.1);
	}
	&:active {
		box-shadow: 0 0 blue,
							0 1px adjust-hue(blue, 5%),
							0 2px adjust-hue(blue, 10%);
		transform: scale(1.1) translate(0, 2px);
	}
}