Hover

na podstawie webdesignerdepot.com

wspólne własności

.item {
	transition: all 0.3s ease;
}
KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy css i html

Na podstawie html5canvastutorials.com

wspólne własności css

a.example {
	width: 120px;
	height: 52px;
	margin-bottom: 80px;
	color: black;
	display: block;
	position: relative;
	box-sizing: border-box;
}
a.example span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	display: grid;
	place-content: center;
}
Flip Flip
<a href="#" class="example-1">
    <span>Flip</span>
    <span>Flip</span>
</a>

css

.example-1 {
	background: #289DCC;
}

.example-1 span {
	background: #289DCC;
	transition: all 0.3s linear;
}

.example-1 span:last-of-type {
	background: #aaa;
	transform: rotateX(90deg);
	transform-origin: 0 0;
}

.example-1:hover span:last-of-type {
	background: #fff;
	transform: rotateX(0deg);
}

.example-1:hover span:first-of-type {
	background: #289DCC;
}
Top Top
<a href="#" class="example-4">
     <span><span>
          <span>Top</span>
          <span>Top</span>
     </span></span>
</a>

css

.example-4 > span > span {
	transform-style: preserve-3d;
	transition: all 0.2s linear;
	transform-origin: 0 0;
}

.example-4 > span > span span {
	background: #289DCC;
	transform-style: preserve-3d;
	transition: transform 0.3s linear, background 0.3s linear;
	transform-origin: 0 0;
}

.example-4:hover > span > span span:first-of-type {
	background: #289DCC;
}

.example-4 > span > span span:nth-of-type(2) {
	background: #fff;
	transform: rotateX(-90deg) translateZ(52px);
}

.example-4:hover > span > span span:nth-of-type(2) {
	background: #fff;
}

.example-4:hover > span > span {
	transform: rotateX(90deg);
}
Doors Doors Doors Doors
<a href="#" class="example-2">
    <span>Doors</span>
    <span>Doors</span>
    <span>Doors</span>
    <span>Doors</span>
</a>

css

.example-2 {
	background: #289DCC;
}

.example-2 span {
	opacity: 1;
	transition: all 0.3s linear;
}

.example-2 span:nth-of-type(2),
.example-2 span:nth-of-type(3) {
	background: #fff;
	transform: rotateY(-90deg);
	transform-origin: 0 0;
	clip: rect(0, 60px, 9999px, 0);
}

.example-2 span:nth-of-type(3) {
	transform-origin: 100% 100%;
	transform: rotateY(90deg);
	clip: rect(0, 9999px, 9999px, 60px);
}

.example-2:hover span:nth-of-type(2),
.example-2:hover span:nth-of-type(3) {
	background: #fff;
	transform: rotateY(0);
}

.example-2:hover span:nth-of-type(2),
.example-2:hover span:nth-of-type(3) {
	background: #fff;
	transform: rotateY(0);
}

.example-2:hover span:first-of-type {
	background: #289DCC;
}

.example-2 span:last-of-type {
	background: #fff;
	opacity: 0;
	transition: none;
}

.example-2:hover span:last-of-type {
	transition: all 0.05s linear 0.3s;
}
Arrow
<a href="#" class="example-5">
    <span>Arrow</span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
</a>

css

.example-5 span {
	background: #289DCC;
	transform-style: preserve-3d;
	transform-origin: 0 0;
	transition: all 0.1s linear;
}

.example-5 span:nth-of-type(1) {
	z-index: 99999;
}

.example-5:hover span:nth-of-type(5) {
	left: 40px;
}

.example-5 span:nth-of-type(2),
.example-5 span:nth-of-type(3),
.example-5 span:nth-of-type(4) {
	background: none;
}

.example-5 span:nth-of-type(2):after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	border-style: solid;
	border-width: 28px 0 0 28px;
	border-color: transparent transparent transparent #289DCC;
}

.example-5 span:nth-of-type(3):after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	border-style: solid;
	border-width: 28px 28px 0 0;
	border-color: #289DCC transparent transparent #289DCC;
}

.example-5 span:nth-of-type(4):after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 26px 0 26px 23px;
	border-color: transparent transparent transparent #289DCC;
}

.example-5:hover span:nth-of-type(2) {
	top: -28px;
	left: 40px;
}

.example-5:hover span:nth-of-type(3) {
	top: 28px;
	left: 40px;
}

.example-5:hover span:nth-of-type(4) {
	right: -23px;
	left: 63px;
}
Open Open Open
<a href="#" class="example-3">
    <span>Open</span>
    <span>Open</span>
    <span>Open</span>
</a>

css

.example-3 {
	background: #fff;
	transition: transform 0.3s linear, background 0.3s linear 0.3s;
}

.example-3 span {
	transition: all 0.3s linear 0.3s;
}

.example-3:hover {
	background: #fff;
	transform: scale(1.3);
}

.example-3 span:nth-of-type(2),
.example-3 span:nth-of-type(3) {
	background: #289DCC;
	clip: rect(0px, 9999px, 26px, 0px);
	transform-origin: 0 0;
}

.example-3 span:nth-of-type(3) {
	clip: rect(26px, 9999px, 52px, 0px);
	transform-origin: 100% 100%;
}

.example-3:hover span:nth-of-type(2),
.example-3:hover span:nth-of-type(3) {
	background: #289DCC;
	transform: rotateX(-90deg);
}
Fill
<a href="#" class="example-6">
    <span>Fill</span>
    <span> </span>
</a>

css

.example-6 {
	background: #289DCC;
	overflow: hidden;
}

.example-6 span {
	transform-style: preserve-3d;
	transform-origin: 0 0;
	transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}

.example span:first-of-type {
	z-index: 99999;
}

.example-6 span:last-of-type {
	background: #fff;
	left: -100%;
}

.example-6:hover span {
	left: 0;
}

Na podstawie ianlunn.co.uk

wspólne własności css

a {
	color: black;
	font-size: 14px;
	width: 180px;
	margin: 7px;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
	display: block;
	text-align: center;
	text-decoration: none;
}
	
a:focus,
a:hover,
a:active {
	color: white;
}

KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy css i html
2D Transitions
Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce in Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward
Background Transitions
Fade Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

Na podstawie tympanus.net

własności wspólne

HTML
<div class="holdButtons">
	<button class="btn btn-1 btn-1a">Button btn-1a</button>
	<button class="btn btn-1 btn-1b">Button btn-1b</button>
	<button class="btn btn-1 btn-1c">Button btn-1c</button>
	<button class="btn btn-1 btn-1d">Button btn-1d</button>
	<button class="btn btn-1 btn-1e">Button btn-1e</button>
	<button class="btn btn-1 btn-1f">Button btn-1f</button>
</div>

CSS
.holdButtons {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-row: auto auto;
	grid-gap: 40px;
}

.btn {
	background: none;
	border: none;
	outline: none;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	transition: all 0.3s;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	transition: all 0.3s;
}

/* Button 1 */
.btn-1 {
	border: 3px solid #289DCC;
	color: #fff;
}
KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy css i html

Na podstawie codepen.io

na podstawie ddle.net

na podstawie learn.shayhowe.com