1
2
3
4
5
6
7
8

// November 1st - Highlighter.
&.highlight{
	transition: background-color 0.3s;

	&:hover {
		background-color: #FCFF72;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// November 2nd - Skewed.
&.skewed {
	transition: background-color 0.3s, transform 0.3s;
	display: inline-block;

	&:hover {
		background-color: #95FC8D;
		transform: skewX(-10deg);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// November 3rd - Slide Forward.
&.slide-forward {
	position: relative;

	&:after {
		@extend .cover;
		@extend .after;
		transform: translateX(-100%);
		transition: background-color 0.3s, transform 0.3s;
	}

	&:hover:after {
		background-color: #FD8484;
		transform: translateX(0);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// November 4th - Fill Up.
&.fill-up {
	position: relative;

	&:after {
		@extend .cover;
		@extend .after;
		transform: rotateX(-90deg);
		transition: background-color 0.3s, transform 0.3s;
	}

	&:hover:after {
		transform: rotateX(0deg);
		background-color: #72B4FF;
		transition: transform 0.3s;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// November 5th - Spin In.
&.spin-in {
	transition: background-color 0.3s, transform 0.3s;
	position: relative;

	&:after {
		@extend .cover;
		@extend .after;
		transform: rotate(0);
		transition: background-color 0.3s, transform 0.3s;
	}

	&:hover:after {
		background-color: #FCBF5D;
		transform: rotate(180deg);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// November 6th - Mix Match.
&.mix-match {
	position: relative;

	&:hover {
		background-color: rgba(0, 255, 10, 0.5);
		transition-delay: 0.2s;
	}

	&:before {
		@extend .cover;
		@extend .after;
		transform: translateY(-100%);
		transition: transform 0.3s;
	}

	&:after {
		@extend .cover;
		@extend .after;
		transform: translateX(-100%);
		transition: transform 0.3s;
	}

	&:hover:before {
		background-color: rgba(0, 110, 255, 0.3);
		transform: translateX(0);
	}

	&:hover:after {
		background-color: rgba(255, 238, 20, 0.5);
		transform: translateX(0);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// November 7th - Fly In.
&.zoom-out {
	transition: background-color 0.3s, transform 0.3s;
	display: inline-block;
	position: relative;

	&:hover {
		background-color: #c584ff;
		transform: perspective(5px) translateZ(-1px);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// November 8th - Censored.
&.censored {
	position: relative;

	&:after {
		@extend .cover;
		@extend .after;
		transform: rotate(-4deg);
		content: 'censored';
		display: block;
		background-color: black;
		color: white;
		z-index: 1;
		opacity: 1;
		transition: opacity 0.3s, transform 0.3s;
	}

	&:hover:after {
		background-color: none;
		transform: scale(1.05);
		opacity: 0;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// November 9th - Disappearing.
&.disappearing {
	position: relative;
	opacity: 1;
	transition: opacity 0.4s;

	&:hover {
		opacity: 0;
		transition: opacity 1s;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// November 10th - Roll Out.
&.roll-out {
	position: relative;

	&:after,
	&:before {
		@extend .after;
		@extend .cover;
		transition: transform 0.4s, background-color 0.6s;
	}

	&:after {
		left: 50%;
		transform-origin: 100% 50%;
	}

	&:before {
		right: 50%;
		transform-origin: 0 50%;
	}

	&:hover:after {
		transform: rotate(-360deg);
		background-color: #A6FF70;
	}

	&:hover:before {
		transform: rotate(360deg);
		background-color: #A6FF70;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// November 11th - Bounce.
&.bounce {
	position: relative;
	display: inline-block;

	&:hover {
		animation-name: bounce;
		animation-duration: 0.3s;
		animation-direction: alternate;
		animation-timing-function: cubic-bezier(.25,1.25,1,.68);
		animation-iteration-count: infinite;
		background-color: #FFAC59;
	}
}

@keyframes bounce {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-7px);
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

// November 12th - Layered.
$mid-layer-color: red;
&.layered {
	position: relative;
	display: inline-block;
	transition: transform 0.5s;

	&:hover {
		animation-name: layer;
		animation-duration: 1.9s;			
	}

	&:hover:after {
		transform: rotateY(360deg);
		transform-origin: 100% 50%;
		transition: transform 1s;
		x-index: 2;
	}


	&:hover:before {
		transform: rotateX(360deg);
		transform-origin: 50% 100%;
		transition: transform 1s;
		transition-delay: 1s;
		x-index: 5;
	}

	&:after {
		@extend .after;
		@extend .cover;
		color: $mid-layer-color;
		content: attr(data-hover);
	}

	&:before {
		@extend .after;
		@extend .cover;
		content: attr(data-hover);
		color: black;
	}
}

@keyframes layer {
	0% {
		color: black;
	}

	85% {
		color: $mid-layer-color;
	}

	86% {
		color: black;
	}
}