Button Hover Effects

Button Hover Effects.markdown

Button Hover Effects

A Pen by Dominic Kolbe on CodePen.

License.

index.html

h1 Button Hover Effects

section
	.button-wrapper
		.button.slideleft
			span Slide from left

		.button.slideleft
			span Slide from left

		.button.slideleft
			span Slide from left


section.grey
	.button-wrapper
		.button.spin3d
			span.a Foreground
			span.b Background

		.button.spin3d
			span.a Foreground
			span.b Background

		.button.spin3d
			span.a Foreground
			span.b Background

style.css

$dark: #333

html, body
	font-family: 'Montserrat', sans-serif
	height: 100%
	width: 100%

body
	-webkit-font-smoothing: antialiased !important
	text-size-adjust: none
	text-rendering: optimizeLegibility !important

*, :after, :before
	box-sizing: border-box


h1
	color: #333
	display: table
	font-size: 2em
	letter-spacing: 0.08em
	margin: 35px auto 100px
	text-transform: uppercase

section
	padding: 75px 0

	&.grey
		background:
			color: #F4F4F4
	
.button-wrapper
	display: table
	margin: 0 auto

.button
	backface-visibility: hidden
	cursor: pointer
	display: inline-block
	font-size: 1em
	margin: 0 10px
	position: relative

	span
		backface-visibility: hidden
		color: $dark

	&.slideleft
		border: 2px solid $dark
		padding: 10px 20px
		overflow: hidden
		span
			transition: color 900ms
	
		&:after
			content: ''
			backface-visibility: hidden
			background-color: $dark
			border-radius: 50%
			height: 70px
			right: 100%
			position: absolute
			top: 50%
			transform-origin: 0% 50%
			transform: scale3d(1, 5, 1)
			transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1)
			width: 70px
			z-index: -1
	
		&:hover
			span
				color: white
			&:after
				transform: scale3d(5, 3.5, 1)
	
	&.spin3d
		height: 40px
		transform-style: preserve-3d
		perspective: 1000px
		width: 150px
		span
			height: 100%
			width: 100%
			position: absolute
			top: 0
			transition: all 300ms cubic-bezier(0, 0, 0.2, 1)
			text-align: center
			line-height: 40px
			left: 0
			backface-visibility: hidden
			transform-origin: 50% 50%
		span.a
			background: white
			transform: rotateX(0deg) translateZ(20px)
		span.b
			background: $dark
			color: white
			transform: rotateX(-90deg) translateZ(20px)
	
		&:hover
			span.a
				transform: rotateX(90deg) translateZ(20px)
			span.b
				transform: rotateX(0deg) translateZ(20px)
	
	
	
	
	

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />