Html
    Css
    Js

    
                        
/* Box colors */
.bg-1 {
	background:#ECEFF1;
	color:#37474f;
}
/* Common button styles */
.button {
	float:left;
	min-width:150px;
	max-width:250px;
	display:block;
	margin:1em;
	padding:1em 2em;
	border:none;
	background:none;
	color:inherit;
	vertical-align:middle;
	position:relative;
	z-index:1;
	-webkit-backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale;
}
.button:focus {
	outline:none;
}
.button > span {
	vertical-align:middle;
}
/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
.bg-1 .button {
	color:#37474f;
	border-color:#37474f;
}
.button--round-s {
	border-radius:5px;
}
.button--quidel {
	background:#aebbff;
	color:#7986cb;
	overflow:hidden;
	-webkit-transition:color 0.3s;
	transition:color 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
	transition-timing-function:cubic-bezier(0.75,0,0.125,1);
}
.button--quidel.button--inverted {
	background:#fff;
	color:#fff;
}
.button--quidel::before,.button--quidel::after {
	content:''; 
	position:absolute;
	z-index:-1;
	border-radius:inherit;
}
.button--quidel::after {
	top:2px;
	left:2px;
	right:2px;
	bottom:2px;
	background:#fff;
}
.button--quidel.button--inverted::after {
	background:#37474f;
}
.button--quidel::before {
	background:#37474f;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-transform:translate3d(0,100%,0);
	transform:translate3d(0,100%,0);
	-webkit-transition:-webkit-transform 0.3s;
	transition:transform 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
	transition-timing-function:cubic-bezier(0.75,0,0.125,1);
}
.button--quidel.button--inverted::before {
	background:#7986cb;
}
.button--round-s.button--quidel::after {
	border-radius:3px;
}
.button--round-m.button--quidel::after {
	border-radius:13px;
}
.button--round-l.button--quidel::after {
	border-radius:40px;
}
.button--quidel > span {
	padding-left:0.35em;
}
.button--quidel:hover {
	color:#37474f;
}
.button--quidel.button--inverted:hover {
	color:#7986cb;
}
.button--quidel:hover::before {
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}

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

css3按钮效果

0