.Container
	.Buttons
		a.Button(href="#") Slides left
			span.Button-mask.Button-slides.slides-left.Graident-one
		a.Button(href="#") Slides right
			span.Button-mask.Button-slides.slides-right.Graident-five
		a.Button(href="#") Rotates Clockwise
			span.Button-mask.Button-rotates.rotates-clockwise.Graident-four
		a.Button(href="#") Rotates C-Clockwise
			span.Button-mask.Button-rotates.rotates-c-clockwise.Graident-two

remCalc(val)
  return (val/16)rem

gradients = {
	one 	: linear-gradient(135deg, #ecc344 0%, #e42d7f 100%), 		// yellow pink
	two 	: linear-gradient(135deg, #00c7c5 0%, #0088d7 100%), 		// aqua blue
	three : linear-gradient(135deg, #855edd 0%, #63afd3 100%), 		// purple blue
	four 	: linear-gradient(135deg, #e32d76 0%, #648fe6 100%), 		// pink purple
	five 	: linear-gradient(135deg, #b6eb77 0%, #359ab6 100%) 		// blue green
}

body
	background-color: #0a1727
	
a
	color: inherit
	text-decoration: none

.Container
	position: relative
	padding-left: remCalc(15)
	padding-right: @padding-left
	width: 320px
	margin: 0 auto
	
.Button
	backface-visibility: hidden
	box-shadow: 0 6px 12px rgba(0, 0, 0, .4)
	color: #FFF
	display: block
	font-family: 'Roboto', sans-serif
	font-size: remCalc(18)
	font-weight: 500
	letter-spacing: remCalc(1)
	margin-top: remCalc(25)
	padding: remCalc(25) remCalc(35)
	position: relative
	overflow: hidden
	text-align: center
	text-transform: uppercase
	transform-style: preserve-3d
	will-change: transform
	z-index: 1
	&-mask
		position: absolute
		transition: transform .425s ease-in-out
		z-index: -1
		&.slides-left
			left: 0
		&.slides-right
			right: 0
	&-slides
		top: 0
		width: 200%
		height: 100%
	&-rotates
		top: 50%
		left: 50%
		width: 200%
		height: 600%
		transform: translate3d(-50%, -50%, 0)
	&:hover
		.Button-mask.slides-left
			transform: translate3d(-50%, 0, 0)
		.Button-mask.slides-right
			transform: translate3d(50%, 0, 0)
		.Button-mask.rotates-clockwise
			transform: rotate(180deg) translate3d(50%, 50%, 0)
		.Button-mask.rotates-c-clockwise
			transform: rotate(-180deg) translate3d(50%, 50%, 0)
			
.Graident
	&-one
		background: gradients.one
	&-two
		background: gradients.two
	&-three
		background: gradients.three
	&-four
		background: gradients.four
	&-five
		background: gradients.five