<button>
  Click me :)
</button>
@import "compass/css3";



body {
	margin: 100px;
}

@mixin extrude($extrusionHeight, $transition) {
	$halfExtrusion: $extrusionHeight / 2;

	position: relative;
	transform: translateX($extrusionHeight) translateY(-$extrusionHeight);
	transition: $transition;
	&:after, &:before {
		content: ' ';
		position: absolute;
		transition: $transition;
	}
	&:after {
		left: -$halfExtrusion;
		top: 100%;
		height: $extrusionHeight;
		width: 100%;
		transform: skewX(-45deg);
		background: linear-gradient(
				left,
				transparent,
				transparent 20%,
				mediumseagreen 50%,
				transparent 80%,
				transparent
		);
		background-size: 12px 1px; 
    background-position: 3px;
	}
	&:before {
		top: $halfExtrusion;
		right: 100%;
		height: 100%;
		width: $extrusionHeight;
		transform: skewY(-45deg);
		background: linear-gradient(
				top,
				transparent,
				transparent 20%,
				mediumseagreen 50%,
				transparent 80%,
				transparent
		);
		background-size: 1px 12px;
    background-position: right;
	}
}

button {
	border: none;
	padding: 20px 40px;
	background: mediumseagreen;
	box-shadow: inset 1px -1px 0 1px white;
	@include extrude(10px, 0.4s ease-out);
   outline: none;
    color: white;
    font-weight: bold;
    letter-spacing: 3px;
	  &:active {
		  @include extrude(3px, 0.2s ease);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.