button 
	span.text hover me, please 
	span ✨

html, body
	width: 100%
	height: 100%

body
	display: flex
	align-items: center
	justify-content: center
	background: linear-gradient(0deg , #E0EAFC , #CFDEF3)

button
	border: none
	cursor: pointer
	outline: none
	font-family: 'Roboto Mono', monospace
	font-size: 18px
	transform: translate(0)
	background-image: linear-gradient(45deg, #4568DC , #B06AB3)
	padding: 20px 40px
	border-radius: 5px
	box-shadow: 0 22px 44px rgba(gray, 0.1)
	transition: box-shadow .25s
	.text
		-webkit-background-clip: text
		-webkit-text-fill-color: transparent
		background-image: linear-gradient(45deg, #4568DC , #B06AB3)
	&:after
		content: ''
		border-radius: 4px
		position: absolute
		margin: 1px
		top: 0
		left: 0
		bottom: 0
		right: 0
		z-index: -1
		background: white
	&:hover
		background-image: linear-gradient(-45deg, #4568DC , #B06AB3)
		box-shadow: 0 12px 24px rgba(gray, 0.1)
		.text
			background-image: linear-gradient(-45deg, #4568DC , #B06AB3)
	

// Inspired by Hubum
// Check it here :
// http://app.hubum.com/Valentin