.highlight HOVER | CLICK
View Compiled
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300')

body
	background: black
	font-family: 'Open Sans', sans-serif
	display: flex
	flex-direction: column
	justify-content: space-around
	align-items: center
	height: 100vh

// pulse animation
@keyframes pulse
	from
		box-shadow: 0 0 0 0 rgba(3,149,229,.4)
	to
		box-shadow: 0 0 0 45px rgba(3,149,229,0)

// config

$border-width: 1px
$t_dur: .1s
$a_dur: 1s
$blue: #0395E5
$box-width: 200px
$box-height: 60px
$font-size: 15px
$letter-spacing: 3px
$border-radius: 2px // keep below 5px

// highlight styles

.highlight
	position: relative
	width: $box-width
	height: $box-height
	border: 1px solid rgba(white, 0.2)
	border-radius: $border-radius
	line-height: $box-height
	color: white
	text-align: center
	font-size: $font-size
	letter-spacing: $letter-spacing
	cursor: pointer
	user-select: none

	&:before, &:after
		content: ''
		width: 0%
		height: 0%
		position: absolute
		visibility: hidden
		border-radius: $border-radius

	&:before
		border-top: $border-width solid $blue
		border-right: $border-width solid $blue
		transition: width $t_dur ease $t_dur * 3, height $t_dur ease $t_dur * 2, visibility 0s $t_dur * 4
		top: 0
		left: 0

	&:after
		border-left: $border-width solid $blue
		border-bottom: $border-width solid $blue
		bottom: 0
		right: 0
		transition: width $t_dur ease $t_dur, height $t_dur ease, visibility 0s $t_dur * 2

	&:hover
		animation: pulse $a_dur ease-out $t_dur * 4
		color: $blue
		&:before, &:after
			width: 100%
			height: 100%
			visibility: visible
		&:before
			transition: width $t_dur ease, height $t_dur ease $t_dur
		&:after
			transition: width $t_dur ease $t_dur * 2, height $t_dur ease $t_dur * 3, visibility 0s $t_dur * 2
View Compiled
/*
	Ripple effect
	--------------------
	Draws a background radial gradient on the clicked element around the event mouse coordinates,
	then it uses a RAF loop to expand the gradients radius untill it reaches 100%
	
	improvments:
	- get background colour - (convert to hsl ?) - use that as a base with the highlight being lighter or darker
*/

const ripple = el => {
	let d = el.dataset.ripple.split('-'),
		 s = 'rgba(3,149,229,0.4)',
		 e = 'rgba(3,149,229,1)';
	d[2] = Number(d[2]) + 4;
	el.dataset.ripple = d.join('-');
	el.style.background = `radial-gradient(circle at ${d[0]}px ${d[1]}px, ${s} 0%, ${s} ${d[2]}%, ${e} ${d[2] + 0.1}%)`;
	
	window.requestAnimationFrame(() => {
		if (el.dataset.ripple && d[2] < 100) ripple(el)
	});
};

const start = ev => {
	ev.target.dataset.ripple = `${ev.offsetX}-${ev.offsetY}-0`
	ripple(ev.target);
};

const stop = ev => {
	let el = document.querySelector('[data-ripple]');
	delete el.dataset.ripple;
	el.style.background = 'none';
};

// Events
document.querySelectorAll('.highlight').forEach( el => el.addEventListener( 'mousedown', start ));
document.addEventListener( 'mouseup', stop );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.