a(href="#") Submit
View Compiled
poscenter(m=50%, n=m, tf1=, tf2=)
	position absolute
	left m
	top n
	transform '%s translate(-%s, -%s) %s' % (tf1 @left @top tf2)

_ = "https://cdn-icons-png.flaticon.com/128/109/109617.png"

@import url('https://fonts.googleapis.com/css?family=Montserrat')

body // Personal fix, seems to create lines when Chrome is in +1920px
	background #2f2f31
	transform rotateX(0.003deg)
	height 100vh
	color #f

a
	poscenter()
	color #cecd24
	text-decoration none
	font-size 2em
	display inline-block
	font-family Montserrat
	text-transform uppercase
	padding 0.5em 2em
	border 2px solid #cecd24
	transition .02s .2s cubic-bezier(.1, 0, .1, 1)
	
	&::before
		content ""
		display inline-block
		position absolute
		top 0
		left 0
		right 100%
		bottom 0
		background #cecd24
		transition .3s .2s cubic-bezier(.1, 0, .1, 1), left .3s cubic-bezier(.1, 0, .1, 1)
		z-index -1

	&::after
		content ""
		display inline-block
		background-image url(_)
		position absolute
		top 0
		left calc(100% - 3em)
		right 3em
		bottom 0
		background-size 1.5em
		background-repeat no-repeat
		background-position center
		transition right .3s cubic-bezier(.1, 0, .1, 1)
	
	&:hover
		padding 0.5em 3.5em 0.5em 0.5em
		
		&::before
			left calc(100% - 3em)
			right 0
			transition .3s cubic-bezier(.1, 0, .1, 1), left .3s .2s cubic-bezier(.1, 0, .1, 1)
		
		&::after
			right 0
			transition right .3s .2s cubic-bezier(.1, 0, .1, 1)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js