Button Hover Border Animations

button-hover-border-animations.markdown

Button Hover Border Animations

Using pseudo elements to mimic an element's border with transition and alternating transform-origin on hover

A Pen by Sean Free on CodePen.

License.

index.pug

.wrapper
	h2 Clockwise
	.row
		.button.clockwise.horizontal Horizontal
		.button.clockwise.vertical Vertical
		.button.clockwise.both Both
			.inner
	h2 Counter-clockwise
	.row
		.button.counterclockwise.horizontal Horizontal
		.button.counterclockwise.vertical Vertical
		.button.counterclockwise.both Both
			.inner
		
a.codepen-link(href='https://www.codepen.io/seanfree' target='_blank')

style.sass

html, body
	color: white
	background: rgb(50,60,70)
	font-weight: lighter
h1, h2, h3, h4
	font-family: 'Oswald'
.wrapper
	display: flex
	flex-direction: column
	flex-wrap: wrap
	align-items: center
	justify-content: center
	width: 100vw
	height: 100vh
	.row
		display: flex
		margin: 10px 0
	h2
		font-size: 1.8em
.button
	position: relative
	cursor: pointer
	color: white
	font-family: 'Lato'
	font-size: 1.5em
	padding: 0.5em 1em 0.65em
	margin: 0 10px
	background: rgb(60,70,80)
	.inner
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
	&:nth-of-type(1)
		&:before, &:after, .inner:before, .inner:after
			background-color: #ffa726
	&:nth-of-type(2)
		&:before, &:after, .inner:before, .inner:after
			background-color: #26a69a
	&:nth-of-type(3)
		&:before, &:after, .inner:before, .inner:after
			background-color: #7e57c2
	&:before, &:after, .inner:before, .inner:after
		position: absolute
		content: ""
		display: block
		transition: transform 0.3s
	&.horizontal, &.both
		&:before, &:after
			left: 0
			width: 100%
			height: 2px
			transform: scaleX(0)
		.inner
			&:before, &:after
				top: 0
				width: 2px
				height: 100%
				transform: scaleY(0)
			&:before
				left: 0
			&:after
				right: 0
			&:hover
				&:before, &:after
					transform: scaleY(1)
		&:before
			top: 0
		&:after
			bottom: 0
		&:hover
			&:before, &:after
				transform: scaleX(1)
			.inner:before, .inner:after
				transform: scaleY(1)
		&.clockwise
			.inner
				&:before
					transform-origin: top center
				&:after
					transform-origin: bottom center
			&:before
				transform-origin: right center
			&:after
				transform-origin: left center
			&:hover
				.inner
					&:before
						transform-origin: bottom center
					&:after
						transform-origin: top center
				&:before
					transform-origin: left center
				&:after
					transform-origin: right center
		&.counterclockwise
			.inner
				&:before
					transform-origin: bottom center
				&:after
					transform-origin: top center
			&:before
				transform-origin: left center
			&:after
				transform-origin: right center
			&:hover
				.inner
					&:before
						transform-origin: top center
					&:after
						transform-origin: bottom center
				&:before
					transform-origin: right center
				&:after
					transform-origin: left center
	&.vertical
		&:before, &:after
			top: 0
			width: 2px
			height: 100%
			transform: scaleY(0)
		&:before
			left: 0
		&:after
			right: 0
		&:hover
			&:before, &:after
				transform: scaleY(1)
		&.clockwise
			&:before
				transform-origin: top center
			&:after
				transform-origin: bottom center
			&:hover
				&:before
					transform-origin: bottom center
				&:after
					transform-origin: top center
		&.counterclockwise
			&:before
				transform-origin: bottom center
			&:after
				transform-origin: top center
			&:hover
				&:before
					transform-origin: top center
				&:after
					transform-origin: bottom center
.codepen-link
	position: absolute
	bottom: 30px
	right: 30px
	height: 40px
	width: 40px
	z-index: 10
	border-radius: 50%
	box-sizing: border-box
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg')
	background-position: center center
	background-size: cover
	opacity: 0.5
	transition: all 0.25s
	&:hover
		opacity: 0.8
		box-shadow: 0 0 6px #efefef