CodePen Embed - My Long List of Simple Hover Effects

.wrap

View Compiled

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

$c: #2196F3;
$h: #FF4081;

%bg {
	color: #FFF;
	background: $c;
	border-color: $c;
}
%b {
	color: $c;
	border-color: $c;
	background: transparent;
}
%t {
	color: $c;
	border-color: transparent;
	background: transparent;
}
%p {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: $c;
	width: 150%;
	padding-top: 150%;
	transition: 0.25s ease;
}
%pc {
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}
%c {
	position: relative;
	overflow: hidden;
}
%s {
	box-shadow: 
		0 5px 5px -5px rgba($c, 0.15),
		0 10px 10px -5px rgba($c, 0.15),
		0 15px 15px -5px rgba($c, 0.15),
		0 20px 20px -5px rgba($c, 0.15);
}

.wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 25px;
	padding: 25px;
	@media screen and (max-width: 1000px) { 
		grid-template-columns: repeat(3, 1fr);
	}
	@media screen and (max-width: 800px) { 
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (max-width: 600px) { 
		grid-template-columns: 1fr;
	}
	div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 25px;
		position: relative;
		border: 1px solid rgba($c, 0.25);
		p {
			margin: 15px 0 0;
			font-family: 'Ubuntu', sans-serif;
		}
		em {
			@extend %pc;
			position: absolute;
			top: 0;
			left: 50%;
			font-style: normal;
			font-size: 12px;
			padding: 5px 10px;
			background: #FFF;
			border: 1px solid rgba($c, 0.25);
		}
	}
}

button {
	padding: 10px 20px;
	border-radius: 6px;
	border-width: 2px;
	border-style: solid;
	font-size: 20px;
	font-family: 'Ubuntu', sans-serif;
	cursor: pointer;
	transition: 0.25s ease;
	& > span {
		position: relative;
		z-index: 1;
	}
	&.bg-hide {
		@extend %bg;
		&:hover {
			@extend %b;
		}
	}
	&.bg-show {
		@extend %b;
		&:hover {
			@extend %bg;
		}
	}
	&.bg-text {
		@extend %bg;
		&:hover {
			@extend %t;
		}
	}
	&.bg-text-show-bg {
		@extend %t;
		&:hover {
			@extend %bg;
		}
	}
	&.bg-text-show-border {
		@extend %t;
		&:hover {
			@extend %b;
		}
	}
	&.radial-out {
		@extend %b;
		@extend %c;
		color: #FFF;
		&::after {
			@extend %p;
			@extend %pc;
			border-radius: 999px;
			top: 100%;
		}
		&:hover {
			color: $c;
			&:after {
				top: 300%;
			}
		}
	}
	&.radial-in {
		@extend .radial-out;
		color: $c;
		&::after {
			top: 300%;
		}
		&:hover {
			color: #FFF;
			&:after {
				top: 100%;
			}
		}
	}
	&.slide-down {
		@extend %b;
		@extend %c;
		color: #FFF;
		&::after {
			@extend %p;
			@extend %pc;
		}
		&:hover {
			color: $c;
			&:after {
				top: 300%;
			}
		}
	}
	&.slide-up {
		@extend .slide-down;
		color: $c;
		&::after {
			top: 300%;
		}
		&:hover {
			color: #FFF;
			&:after {
				top: 50%;
			}
		}
	}
	&.slide-left {
		@extend .slide-down;
		&:hover:after {
			left: -90%;
			top: 50%;
		}
	}
	&.slide-right {
		@extend .slide-left;
		&:hover:after {
			left: 190%;
		}
	}
	&.radius-increase {
		@extend %b;
		&:hover {
			border-radius: 30px;
		}
	}
	&.radius-decrease {
		@extend %b;
		border-radius: 30px;
		&:hover {
			border-radius: 6px;
		}
	}
	&.border-dashed {
		@extend %b;
		&:hover {
			border-style: dashed;
		}
	}
	&.border-dotted {
		@extend %b;
		&:hover {
			border-style: dotted;
		}
	}
	&.opacity-increase {
		@extend %bg;
		opacity: 0.75;
		&:hover {
			opacity: 1;
		}
	}
	&.opacity-decrease {
		@extend %bg;
		&:hover {
			opacity: 0.75;
		}
	}
	&.grayscale-increase {
		@extend %bg;
		&:hover {
			filter: grayscale(1);
		}
	}
	&.grayscale-decrease {
		@extend %bg;
		filter: grayscale(1);
		&:hover {
			filter: grayscale(0);
		}
	}
	&.button-blur {
		@extend %bg;
		&:hover {
			filter: blur(6px);
		}
	}
	&.text-blur {
		@extend %bg;
		&:hover {
			span {
				filter: blur(6px);
			}
		}
	}
	&.bg-color {
		@extend %bg;
		&:hover {
			background: $h;
			border-color: $h;
		}
	}
	&.text-color {
		@extend %bg;
		&:hover {
			color: $h;
		}
	}
	&.border-color {
		@extend %b;
		&:hover {
			border-color: $h;
		}
	}
	&.border-text-color {
		@extend .border-color;
		&:hover {
			color: $h;
		}
	}
	&.shadow-increase {
		@extend %bg;
		&:hover {
			@extend %s;
		}
	}
	&.shadow-decrease {
		@extend %bg;
		@extend %s;
		&:hover {
			box-shadow: none;
		}
	}
	&.shadow-float {
		@extend .shadow-increase;
		&:hover {
			transform: translateY(-6px);
		}
	}
	&.scale-increase {
		@extend %bg;
		&:hover {
			transform: scale(1.1);
		}
	}
	&.scale-decrease {
		@extend %bg;
		&:hover {
			transform: scale(0.9);
		}
	}
	&.float-down {
		@extend %bg;
		&:hover {
			transform: translateY(6px);
		}
	}
	&.float-up {
		@extend %bg;
		&:hover {
			transform: translateY(-6px);
		}
	}
	&.float-left {
		@extend %bg;
		&:hover {
			transform: translateX(-6px)
		}
	}
	&.float-right {
		@extend %bg;
		&:hover {
			transform: translateX(6px)
		}
	}
	&.button-rotate {
		@extend %bg;
		&:hover {
			transform: rotate(-6deg);
		}
	}
	&.button-rotate-grow {
		@extend %bg;
		&:hover {
			transform: rotate(-6deg) scale(1.1);
		}
	}
	&.button-rotate-shrink {
		@extend %bg;
		&:hover {
			transform: rotate(-6deg) scale(0.9);
		}
	}
	&.skew-horizontal {
		@extend %bg;
		&:hover {
			transform: skewX(-6deg);
		}
	}
	&.skew-vertical {
		@extend %bg;
		&:hover {
			transform: skewY(-6deg);
		}
	}
	&.flip-horizontal {
		@extend %bg;
		transition: 0.5s ease;
		&:hover {
			transform: rotateY(360deg);
		}
	}
	&.flip-vertical {
		@extend .flip-horizontal;
		&:hover {
			transform: rotateX(360deg);
		}
	}
	&.increase-letter-space {
		@extend %bg;
		&:hover {
			letter-spacing: 5px;
		}
	}
	&.swipe-overlay {
		@extend %b;
		@extend %c;
		&::after {
			@extend %p;
			transform: rotate(25deg);
			top: -100%;
			left: -190%;
		}
		&:hover {
			color: #FFF;
			&:after {
				left: -30%;
			}
		}
	}
	&.swipe-overlay-out {
		@extend .swipe-overlay;
		&::after {
			transition: 0.5s ease;
		}
		&:hover {
			color: $c;
			&:after {
				left: 130%;
			}
		}
	}
	&.icon-slide-left {
		@extend %bg;
		@extend %c;
		&::after {
			@extend %pc;
			content: "👨‍🚀";
			position: absolute;
			left: -20%;
			transition: 0.25s ease;
		}
		span {
			transition: 0.25s ease;
		}
		&:hover {
			span {
				margin-left: 20px;
			}
			&:after {
				left: 20px;
			}
		}
	}
	&.icon-slide-right {
		@extend .icon-slide-left;
		&::after {
			left: 120%;
		}
		&:hover {
			span {
				margin-left: 0;
				margin-right: 20px;
			}
			&:after {
				left: calc(100% - 20px);
			}
		}
	}
}

View Compiled

function CreateButtons(className, isNew) {
	this.className = className,
	this.isNew = isNew;
};
CreateButtons.prototype.createButton = function() {
	return (
		`
			<button class=${this.className}><span>Button</span></button>
			<p>${this.className}</p>
			${this.isNew ? `<em>New</em>` : ''}
		`
	)
}

const bgHide = new CreateButtons('bg-hide');
const bgShow = new CreateButtons('bg-show');
const bgText = new CreateButtons('bg-text');
const bgTextShowBg = new CreateButtons('bg-text-show-bg');
const bgTextShowBorder = new CreateButtons('bg-text-show-border');
const bgBorder = new CreateButtons('bg-border');
const radialOut = new CreateButtons('radial-out');
const radialIn = new CreateButtons('radial-in');
const slideDown = new CreateButtons('slide-down');
const slideUp = new CreateButtons('slide-up');
const slideLeft = new CreateButtons('slide-left');
const slideRight = new CreateButtons('slide-right');
const radiusIncrease = new CreateButtons('radius-increase');
const radiusDecrease = new CreateButtons('radius-decrease');
const borderDashed = new CreateButtons('border-dashed');
const borderDotted = new CreateButtons('border-dotted');
const opacityIncrease = new CreateButtons('opacity-increase');
const opacityDecrease = new CreateButtons('opacity-decrease');
const grayscaleIncrease = new CreateButtons('grayscale-increase');
const grayscaleDecrease = new CreateButtons('grayscale-decrease');
const buttonBlur = new CreateButtons('button-blur');
const textBlur = new CreateButtons('text-blur');
const bgColor = new CreateButtons('bg-color');
const textColor = new CreateButtons('text-color');
const borderColor = new CreateButtons('border-color');
const borderTextColor = new CreateButtons('border-text-color');
const shadowIncrease = new CreateButtons('shadow-increase');
const shadowDecrease = new CreateButtons('shadow-decrease');
const shadowFloat = new CreateButtons('shadow-float');
const scaleIncrease = new CreateButtons('scale-increase');
const scaleDecrease = new CreateButtons('scale-decrease');
const floatDown = new CreateButtons('float-down');
const floatUp = new CreateButtons('float-up');
const floatLeft = new CreateButtons('float-left');
const floatRight = new CreateButtons('float-right');
const buttonRotate = new CreateButtons('button-rotate');
const buttonRotateGrow = new CreateButtons('button-rotate-grow');
const buttonRotateShrink = new CreateButtons('button-rotate-shrink');
const skewH = new CreateButtons('skew-horizontal');
const skewV = new CreateButtons('skew-vertical');
const flipH = new CreateButtons('flip-horizontal', true);
const flipV = new CreateButtons('flip-vertical', true);
const increaseLetterSpace = new CreateButtons('increase-letter-space', true);
const swipeOverlay = new CreateButtons('swipe-overlay', true);
const swipeOverlayOut = new CreateButtons('swipe-overlay-out', true);
const iconSlideLeft = new CreateButtons('icon-slide-left', true);
const iconSlideRight = new CreateButtons('icon-slide-right', true);

const buttonsArray = [
	iconSlideLeft,
	iconSlideRight,
	swipeOverlayOut,
	swipeOverlay,
	increaseLetterSpace,
	flipH,
	flipV,
	bgHide, 
	bgShow, 
	bgText, 
	bgTextShowBg,
	bgTextShowBorder,
	radialOut, 
	radialIn, 
	slideDown, 
	slideUp, 
	slideLeft, 
	slideRight, 
	radiusIncrease, 
	radiusDecrease, 
	borderDashed,
	borderDotted,
	opacityIncrease,
	opacityDecrease,
	grayscaleIncrease,
	grayscaleDecrease,
	buttonBlur,
	textBlur,
	bgColor,
	textColor,
	borderColor,
	borderTextColor,
	shadowIncrease,
	shadowDecrease,
	shadowFloat,
	scaleIncrease,
	scaleDecrease,
	floatDown,
	floatUp,
	floatLeft,
	floatRight,
	buttonRotate,
	buttonRotateGrow,
	buttonRotateShrink,
	skewH,
	skewV,
];

const buttonsWrapper = document.querySelector('.wrap');
buttonsWrapper.innerHTML = 
	buttonsArray.map(button => `<div>${button.createButton()}</div>`).join('');

Run Pen

This Pen is owned by Mark Mead on CodePen.

See more by @markmead on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.