Html
    Css
    Js
 body {
	background:#fff
}
/* Mixins */
        /* bg shortcodes */
        .bg-gradient1 span,.bg-gradient1:before {
	background:#52A0FD;
	background:-webkit-linear-gradient(left,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
	background:linear-gradient(to right,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
}
.bg-gradient2 span,.bg-gradient2:before {
	background:#44ea76;
	background:-webkit-linear-gradient(left,#44ea76 0%,#39fad7 80%,#39fad7 100%);
	background:linear-gradient(to right,#44ea76 0%,#39fad7 80%,#39fad7 100%);
}
.bg-gradient3 span,.bg-gradient3:before {
	background:#fa6c9f;
	background:-webkit-linear-gradient(left,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
	background:linear-gradient(to right,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
}
/* General */
        .wrapper {
	margin:5% auto;
	text-align:center;
}
a {
	text-decoration:none;
}
a:hover,a:focus,a:active {
	text-decoration:none;
}
/* fancy Button */
        .fancy-button {
	display:inline-block;
	margin:30px;
	font-family:'Montserrat',Helvetica,Arial,sans-serif;
	font-size:17px;
	letter-spacing:0.03em;
	text-transform:uppercase;
	color:#ffffff;
	position:relative;
}
.fancy-button:before {
	content:'';
	display:inline-block;
	height:40px;
	position:absolute;
	bottom:-5px;
	left:30px;
	right:30px;
	z-index:-1;
	border-radius:30em;
	-webkit-filter:blur(20px) brightness(0.95);
	filter:blur(20px) brightness(0.95);
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.fancy-button i {
	margin-top:-1px;
	margin-right:20px;
	font-size:1.265em;
	vertical-align:middle;
}
.fancy-button span {
	display:inline-block;
	padding:18px 60px;
	border-radius:50em;
	position:relative;
	z-index:2;
	will-change:transform,filter;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.fancy-button:focus,.fancy-button:active {
	color:#ffffff;
}
.fancy-button:hover {
	color:#ffffff;
}
.fancy-button:hover span {
	-webkit-filter:brightness(1.05) contrast(1.05);
	filter:brightness(1.05) contrast(1.05);
	-webkit-transform:scale(0.95);
	transform:scale(0.95);
}
.fancy-button:hover:before {
	bottom:0;
	-webkit-filter:blur(10px) brightness(0.95);
	filter:blur(10px) brightness(0.95);
}
.fancy-button.pop-onhover:before {
	opacity:0;
	bottom:10px;
}
.fancy-button.pop-onhover:hover:before {
	bottom:-7px;
	opacity:1;
	-webkit-filter:blur(20px);
	filter:blur(20px);
}
.fancy-button.pop-onhover:hover span {
	-webkit-transform:scale(1.04);
	transform:scale(1.04);
}
.fancy-button.pop-onhover:hover:active span {
	-webkit-filter:brightness(1) contrast(1);
	filter:brightness(1) contrast(1);
	-webkit-transform:scale(1);
	transform:scale(1);
	-webkit-transition:all 0.15s ease-out;
	transition:all 0.15s ease-out;
}
.fancy-button.pop-onhover:hover:active:before {
	bottom:0;
	-webkit-filter:blur(10px) brightness(0.95);
	filter:blur(10px) brightness(0.95);
	-webkit-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

多渐变的漂亮按钮

0