<section class="btns btns-1">
	<p class="btns-list">
		<button class="btn btn-1 btn-1a">button</button>
		<button class="btn btn-1 btn-1b">button</button>
		<button class="btn btn-1 btn-1c">button</button>
		<button class="btn btn-1 btn-1d">button</button>
		<button class="btn btn-1 btn-1e">button</button>
		<button class="btn btn-1 btn-1f">button</button>
	</p>
</section>

<section class="btns btns-2">
	<p class="btns-list">
		<button class="btn btn-2 btn-2a icon-right">button</button>
		<button class="btn btn-2 btn-2b icon-left">button</button>
		<button class="btn btn-2 btn-2c icon-right">button</button>
		<button class="btn btn-2 btn-2d icon-left">button</button>
	</p>
</section>

<section class="btns btns-3">
	<p class="btns-list">
		<button class="btn btn-3 btn-3a icon-loading"><span>button</span></button>
		<button class="btn btn-3 btn-3b icon-qq"><span>button</span></button>
	</p>
</section>

<section class="btns btns-4">
	<p class="btns-list">
		<button class="btn btn-4 btn-4a icon-right">button</button>
		<button class="btn btn-4 btn-4b icon-qq">button</button>
		<button class="btn btn-4 btn-4c icon-weixin">button</button>
		<button class="btn btn-4 btn-4d icon-left">button</button>
		<button class="btn btn-4 btn-4e icon-love-0">button</button>
		<button class="btn btn-4 btn-4f icon-star-0">button</button>
		<button class="btn btn-4 btn-4g icon-add">button</button>
		<button class="btn btn-4 btn-4m icon-email">button</button>
		<button class="btn btn-4 btn-4n icon-email">button</button>
	</p>
</section>

<section class="btns btns-5">
	<p class="btns-list">
		<button class="btn btn-5 btn-5a">button</button>
		<button class="btn btn-5 btn-5b">button</button>
	</p>
</section>
@font-face {
  font-family: 'iconfont';  /* project id 13565 */
  src: url('//at.alicdn.com/t/font_462ambjrvck81tt9.eot');
  src: url('//at.alicdn.com/t/font_462ambjrvck81tt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_462ambjrvck81tt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_462ambjrvck81tt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_462ambjrvck81tt9.svg#iconfont') format('svg');
}


body, html {
	font-size: 100%;
	height: 100%;
}
*, *:after, *:before {
    box-sizing: border-box;
}
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #fff;
}
.btn {
	border: none;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	z-index: 1;
	transition: all 0.3s;
	font-size: 16px;
	&::after{
		content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
		transform: translateZ(0);
	}
}

.icon-left:after{ content:'\e607'; font-family:'iconfont'; }
.icon-right:after{ content:'\e605'; font-family:'iconfont'; }
.icon-loading:after{ content:'\e604'; font-family:'iconfont'; }
.icon-qq:after{ content:'\e608'; font-family:'iconfont'; }
.icon-weixin:after{ content:'\e69e'; font-family:'iconfont'; }
.icon-frends:after{ content:'\e633'; font-family:'iconfont'; }
.icon-love-0:after{ content: '\e60b'; font-family: 'iconfont'; }
.icon-star-0:after{ content: '\e8e9'; font-family: 'iconfont'; }
.icon-add:after{ content: '\e60a'; font-family: 'iconfont'; }
.icon-email:after{ content: '\e64a'; font-family: 'iconfont';}

.btns { margin: 0 auto; padding: 5em 3em; text-align: center; color: #fff; }

.btns-1 { background: #0e83cd; }
.btn-1 { 
	border: 2px solid #fff; color: #fff;
	&:hover,&:active{
		color: #0e83cd;
	}
	&a{
		&:hover,&:active{
			background: #fff;
		}
	}
	&b{
		&::after{
			height: 1px;
			width: 100%;
			left: 0;
			top: -1px;
			background: #fff;
			transform-origin: top;
		}
		&:hover,&:active{
			&::after{
				transform: scaleY(69);
			}
		}
	}
	&c{
		&:after{
			// width: 0;
			width: 1px;
			left: -1px;
			height: 100%;
			top:0;
			background: #fff;
			transform-origin: left;
		}
		&:hover,&:active{
			&:after{
				transform: scaleX(236);
				// width: 100%;
			}
		}
	}
	&d{
		&:after{
			width: 1px;
			height: 100%;
			left: 50%;
			top: 0;
			background: #fff;
			opacity: 0;
			transform-origin: center center;
		}
		&:hover,&:active{
			&:after{
				opacity: 1;
				transform: scaleX(220);
			}
		}
	}
	&e{
		overflow: hidden;
		&:after{
			width: 1px;
			height: 100%;
			left: 50%;
			top: 0;
			background: #fff;
			opacity: 0;
			transform: rotateZ(-45deg) scaleY(3.75);
			transform-origin: center center;
		}
		&:hover,&:active{
			&:after{
				opacity: 1;
				transform: rotateZ(-45deg) scaleX(119) scaleY(3.75);
			}
		}
	}
	&f{
		overflow: hidden;
		&:after{
			width: 100%;
			height: 1px;
			left: 0;
			top: 50%;
			background: #fff;
			opacity: 0;
			transform: translateZ(0);
			transform-origin: center center;
		}
		&:hover,&:active{
			&:after{
				opacity: 1;
				transform: scaleY(50);
			}
		}
	}
}

.btns-2 {background: #2ecc71;}
.btn-2 { 
	border-radius: 50px; border: 2px solid #fff; color: #fff; overflow: hidden;
	&:hover, &:active{
		background: #24b662;
	}
	&:after{
		font-size: 125%;
		line-height: 3.5;
		height: 100%;
		top: 0;
		opacity: 0;
	}
	&a,&b,&c,&d{
		&:hover:after,&:active:after{
			opacity: 1;
			transform: translateX(0);
		}
	}
	&a:after,&c:after{
		left: 80%;
	}
	&b:after,&d:after{
		left:20%;
	}
	&a:after, &d:after{
		transform: translateX(100%);
	}
	&b:after,&c:after{
		transform: translateX(-100%)
	}
} 

.btns-3 { background: #9e54bd;}
.btn-3 {
	background: #823aa0; color: #fff; height: 70px; min-width: 260px; line-height: 24px; font-size: 16px; overflow: hidden; backface-visibility: hidden;
	span{
		display: block;
    position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		line-height: 70px;
    transition: all 0.3s;
    backface-visibility: hidden;
	}
	&:after{
		height: 100%;
		width: 100%;
		line-height: 2.5;
		font-size: 180%;
		text-align: center;
		left: 0; top: 0;
	}
	&a{
		&:after{
			transform:translateY(-100%);
		}
		&:hover,&:active{
			&:after{
				transform:translateY(0);
			}
			span{
				transform: translateY(100%);
			}
		}
	}
	&b{
		&:after{
			transform: translateX(-100%);
		}
		&:hover,&:active{
			&:after{
				transform: translateX(0);
			}
			span{
				transform: translateX(100%);
			}
		}
	}
	
}

.btns-4 { background: #2ac56c;}
.btn-4 { 
	background: #17aa56; color: #fff; border-radius: 7px; box-shadow: 0 5px #119e4d; padding: 25px 60px 25px 90px;  overflow: hidden;
	&:after{
		position: absolute;
    left: 0;
    width: 40%;
    font-size: 160%;
    line-height: 0.8;
    color: #0a833d;
	}
	&a{
		&:hover,&:active{
			&:after{
				animation: moveToRight 0.5s;
			}
			animation: textFadeOut .5s;
		}
	}
	&b{
		&:hover,&:active{
			&:after{
				animation: scaleUp 0.5s;
			}
		}
	}
	&c{
		&:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			z-index: -1;
			width: 0;
			background: #0a833d;
		}
		&:hover,&:active{
			&:before{
				animation: fillToRight 0.7s forwards;
			}
		}
	}
	&d{
		&:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 0;
			z-index: -1;
			width: 100%;
			background: #21bb63;
		}
		&:hover,&:active{
			&:before{
				animation: emptyBottom 0.7s forwards;
			}
		}
	}
	&e{
		&:before{
			font-family: 'iconfont';
			content:'\e60c';
			color: #ea515e;
			position: absolute;
			left: 0;
			width: 40%;
			font-size: 160%;
			line-height: 0.8;
			transform: scale(0);
    	opacity: 0;
			
		}
		&:hover{
			&:before{
				animation: scaleFade .5s forwards;
			}
		}
	}
	&f{
		&:before{
			font-family: 'iconfont';
			content:'\e611';
			color: #ffe44d;
			position: absolute;
			left: 0;
			width: 40%;
			font-size: 160%;
			line-height: 0.8;
			transform: scale(4);
    	opacity: 0;
			visibility: hidden;
		}
		&:hover{
			&:before{
				visibility: visible;
				animation: dropDown .3s forwards;
			}
		}
	}
	&g{
		&:before{
			font-family: 'iconfont';
			content:'\e60a';
			color: #0a833d;
			position: absolute;
			left: 0;
			width: 40%;
			font-size: 160%;
			line-height: 0.8;
			transform: scale(2);
    	opacity: 0;
			visibility: hidden;
		}
		&:hover{
			&:before{
				visibility: visible;
				animation: dropDownFade .5s forwards;
			}
		}
	}
	&m{
		&:before{
			content:'SUCCESS';
			z-index: 1;
			color: #fff;
			position: absolute;
			left: 40%;
			visibility: hidden;
		}
		&:hover{
			&:before{
				visibility: visible;
				animation: moveUp .5s;
			}
			&:after{
				content: '\e615';
			}
			color: transparent;
		}
	}
	&n{
		&:before{
			content:'ERROR';
			z-index: 1;
			color: #fff;
			position: absolute;
			left: 40%;
			visibility: hidden;
		}
		&:hover{
			&:before{
				visibility: visible;
				animation: moveUp .5s;
			}
			&:after{
				content: '\e609';
			}
			color: transparent;
			animation: shake .5s;
		}
	}
}

.btns-5 { background: #ecf0f1;}
.btn-5 {
	background: #5cbcf6;
	color:#fff;
	&a{
		&:after{
			content: ' ';
			position: absolute;
			top: -1px;
			left: -1px;
			bottom: -1px;
			right: -1px;
			border-radius: inherit;
			border: 0 solid #108ee9;
			opacity: .4;
			display: block;
		}
		&:hover{
			background: #6EC2F5;
			&:after{
				animation: rippleOut .4s;
			}
		}
	}
	&b{
		transition: transform ease-out 0.1s, background 0.2s;
		&:after{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0;
			z-index: -2;
			box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
			opacity: 0;
			transform: scale(0.97, 0.92);
		}
		&:hover{
			&:after{
				animation: sonarEffect 1.3s ease-out 75ms;
			}
			background: #43A9E6;
			transform: scale(0.96, 0.9);
		}
	}
}
@keyframes sonarEffect{
	0% { opacity: 0.3; }
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #9FE2FD, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #9FE2FD, 0 0 0 10px rgba(255,255,255,0.5);
		transform: scale(1.1,1.4);
		opacity: 0;
	}
}

@keyframes textFadeOut{
	0% { color: transparent; }
	80% { color: transparent; }
	100% { color: #fff; }
}
@keyframes moveToRight{
	80% { transform: translateX(250%);}
	81% { transform: translateX(250%); opacity: 0;}
	82% { transform: translateX(-50%); opacity: 0;}
	83% { transform: translateX(-50%); opacity: 1;}
	100% { transform: translateX(0); }
}
@keyframes scaleUp{
	80% { opacity: 0; transform: scale(2);}
	100% { opacity: 0; transform: scale(2);}
}
@keyframes fillToRight{
	to { width: 100%; }
}
@keyframes emptyBottom{
	to { height: 100%; }
}
@keyframes scaleFade{
	50% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.5); }
}
@keyframes dropDown{
	to { opacity:1; transform: scale(1); }
}
@keyframes dropDownFade{
	50% { opacity:1; transform: scale(1); }
	100% { opactiy: 0; transform: scale(1.5);}
}
@keyframes moveUp{
	0% { opacity: 0; transform: translateY(50%); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes shake{
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

@keyframes rippleOut {
    to {
        opacity: 0;
        top: -6px;
        left: -6px;
        bottom: -6px;
        right: -6px;
        border-width: 6px
    }
}
View Compiled
Rerun