.button.fire Fire
.button.ice Ice


a(href="https://jouanmarcel.com" target="_blank").ref 🔗 Jouan Marcel

body
	padding: 0
	margin: 0
	height: 100vh
	background-image: url(https://images.pexels.com/photos/2086917/pexels-photo-2086917.png?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260)
	background-size: cover
	background-position: center center
	display: flex
	flex-direction: column
	align-items: center
	justify-content: center

$color-highlight-fire: rgba(255, 236, 168, 1)
$color-primary-fire: rgba(255, 138, 48, 1)
$color-secondary-fire: rgba(240, 96, 29, 1)

$color-highlight-ice: rgba(168, 236, 255, 1)
$color-primary-ice: rgba(48, 138, 255, 1)
$color-secondary-ice: rgba(29, 96, 240, 1)

.button
	border: 1px solid green
	backdrop-filter: blur(10px)
	transform: skewX(-10deg)
	height: 50px
	width: 200px
	border-radius: 20px 5px 20px 0px
	position: relative
	display: flex
	align-items: center
	justify-content: center
	transition: all .3s ease
	font: 15px sans-serif
	font-weight: 300
	text-shadow: 0 0 20px #fff
	text-transform: uppercase
	animation: breath2 2s .5s infinite alternate
	transition: all .2s ease
	cursor: pointer
		
	&:before
		content: ""
		display: block
		width: calc(100% - 22px)
		height: calc(50px - 8px)
		animation: breath 2s infinite alternate
		left: 10px
		top: 3px
		position: absolute
		background-color: transparent
		border: 1px solid #fff
		border-radius: 15px 3px 15px 3px

	&.fire
		border-color: $color-highlight-fire
		background-image: linear-gradient(to bottom, transparentize($color-primary-fire, .4), transparentize($color-secondary-fire, .4))
		box-shadow: 0 0 70px transparentize($color-primary-fire, .4), 0 5px 20px transparentize($color-primary-fire, .4), inset 0 1px $color-highlight-fire, inset 0 -1px $color-highlight-fire
		color: $color-highlight-fire
		&:before
			box-shadow: inset 0 0 30px 0 $color-highlight-fire
	&.ice
		border-color: $color-highlight-ice
		background-image: linear-gradient(to bottom, transparentize($color-primary-ice, .5), transparentize($color-secondary-ice, .5))
		box-shadow: 0 0 70px transparentize($color-primary-ice, .5), 0 5px 20px transparentize($color-primary-ice, .5), inset 0 1px $color-highlight-fire, inset 0 -1px $color-highlight-fire
		color: $color-highlight-ice
		&:before
			box-shadow: inset 0 0 30px 0 $color-highlight-ice
	
	&:hover
		&.fire
			box-shadow: 0 0 70px transparentize($color-primary-fire, .2), 0 5px 20px transparentize($color-primary-fire, .2), inset 0 1px $color-highlight-fire, inset 0 -1px $color-highlight-fire
			&:before
				box-shadow: inset 0 0 50px 0 $color-highlight-fire
		&.ice
			box-shadow: 0 0 70px transparentize($color-primary-ice, .2), 0 5px 20px transparentize($color-primary-ice, .2), inset 0 1px $color-highlight-ice, inset 0 -1px $color-highlight-ice
			&:before
				box-shadow: inset 0 0 50px 0 $color-highlight-ice
			
	& + &
		margin-top: 15px
		animation-delay: .3s


@keyframes breath
	0%
		transform: scaleX(1)
	100%
		transform: scaleX(0.95)

@keyframes breath2
	0%
		transform: skewX(-10deg) scaleX(1)
	100%
		transform: skewX(-10deg) scaleX(0.95)



.ref
	backdrop-filter: blur(10px)
	border: 1px solid rgba(255, 255, 255, .6)
	border-radius: 3px
	padding: 5px 8px
	position: absolute
	font-size: 16px
	bottom: 10px
	right: 10px
	color: #fff
	font-weight: 300
	font-family: sans-serif
	text-decoration: none
	&::first-letter
		font-size: 12px
    

// Author: Jouan Marcel
// Author URI: https://jouanmarcel.com