css实现48种不同样式的按钮悬浮动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现48种不同样式的按钮悬浮动画效果代码

代码标签: css 按钮 悬浮 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <style>
        /* CSS Document */
        
        body {
        	font-family: 'Raleway', sans-serif;  
        	margin:0px;
        	font-size: 15px;			
        	color: #b3b3b3;				
        	width:100%;
        }
        * { 
        	box-sizing:border-box;
        }
        a:-webkit-any-link {
        	text-decoration:none;
        }
        .hdr{
        	padding:5px; 
        	background-color:white;
        }
        h1 { 
        	color: turquoise; 
        	font-family: 'Raleway', sans-serif; 
        	font-size: 40px; 
        	text-shadow: 1px 2px 2px rgba(149, 150, 150, 1);
        	font-weight: bold; 
        	letter-spacing: -1px; 
        	line-height: 1; 
        	text-align: center; 
        }
        h2 {
        	color: tomato; 
        	font-family: 'Open Sans', sans-serif; 
        	font-size: 20px; 
        	font-weight: 300;  
        	text-align: center; 
        }
        p { 
        	color: tomato; 
        	text-align:center;
        	font-family: 'Raleway', sans-serif; 
        	font-size: 14px;  
        	margin: 0 0 24px;  
        }
        .content-1{
            height: auto;
        	width: 1430px;
        }
        .white {
        	height: 200px;
        	padding:70px 50px;
        	background:white;
        	box-shadow:0px 0.5px 6px 0 #8a8a8a;
        }
        .grey {
        	height: 200px;
        	padding:70px 50px;
        	background:#efefef;
        	box-shadow:0px 0.5px 8px 0 #8a8a8a;
        }
        section{
        	width: -webkit-max-content;
        	width: -moz-max-content;
        	width: -o-max-content;
        	width: -ms-max-content;
        }
        div{
        	max-width: auto;
        }
        table{
        	border-collapse: collapse;
        	height: 600px;
        	width: 1430px;
        }
        td{
            height: auto;
            border-style: dotted;
            text-align: center;
        	padding: 50px;
        	width: 1430px;
        }
        .btn-layout, .bttn {		
        	display: inline-flex;
        	margin: 0 5px 0 0;
            height:60px;	
            width:155px;		
        	position: relative;
        	opacity: 0.999;
        	padding: 20px 37px;		
        	text-align:center;
        	border-radius:3px;		
        	border: 1px solid #b3b3b3;
        	-moz-transition: 0.3s;
        	-ms-transition: 0.3s;
        	-o-transition: 0.3s;
        	-webkit-transition: 0.3s;
            transition: 0.3s;
        	overflow:hidden;
        }
            
        /* CSS Document */
        
        /*------------------------------SAMPLE-1------------------------------*/
        
        .b1:hover, .b2:hover, .b3:hover, .b4:hover, .b5:hover, .b6:hover, .b7:hover, .b8:hover {
        	color:white;		
        }
        /*SAMPLE-1 : BUTTON-1*/	
        .b1:before{
        	content: "";
        	width: 100%; 
        	height: 0; 
        	border-radius: 3px;
        	position: absolute; 
        	background-color: #2ecc71; 
        	left: 0; 
        	bottom: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b1:hover:before{
        	height: 100%; 
        	bottom: auto; 
        	top: 0;
        }
        /*SAMPLE-1 : BUTTON-2*/	
        .b2:before{
        	content: ""; 
        	width: 100%; 
        	height: 0; 
        	border-radius: 3px;
        	position: absolute; 
        	background-color: #9b59b6; 
        	left: 0; 
        	top: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b2:hover:before{
        	height: 100%; 
        	top: auto; 
        	bottom: 0;
        }
        /*SAMPLE-1 : BUTTON-3*/	
        .b3:before{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute; 
        	background-color: #ff5722; 
        	right: 0; 
        	top: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b3:hover:before{
        	width: 100%; 
        	right: auto; 
        	left: 0;
        }
        /*SAMPLE-1 : BUTTON-4*/	
        .b4:before{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute; 
        	background-color: #1d8ef7; 
        	left: 0; 
        	top: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b4:hover:before{
        	width: 100%; 
        	left: auto; 
        	right: 0;
        }
        /*SAMPLE-1 : BUTTON-5*/
        .b5:before{
        	content: "";
        	width: 0;
        	height: 0;
        	position: absolute;
        	background-color: #2ecc71; 
        	left: 0; 
        	bottom: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	z-index: -1;
        }
        .b5:after{
        	content: "";
        	width: 0;
        	height: 0;
        	position: absolute;
        	background-color: #2ecc71;
        	right: 0;
        	top: 0;
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b5:hover:before, .b5:hover:after{
        	width: 50%;
        	height: 100%;
        }
        /*SAMPLE-1 : BUTTON-6*/
        .b6:before{
        	content: "";
        	width: 0;
        	height: 0;
        	position: absolute;
        	background-color: #9b59b6;
        	left: 0; 
        	top: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	z-index: -1;
        }
        .b6:after{
        	content: "";
        	width: 0; height: 0;
        	position: absolute; 
        	background-color: #9b59b6; 
        	right: 0; 
        	bottom: 0; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b6:hover:before, .b6:hover:after{
        	width: 50%; 
        	height: 100%;
        }
        /*SAMPLE-1 : BUTTON-7*/
        .b7:before{
        	content: "";
        	width: 0; 
        	height: 0; 
        	position: absolute;
        	background-color: #ff5722; 
        	left: 50%; 
        	bottom: 50%; 
        	transition: 0.4s;
        	-webkit-transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s; 
        	z-index: -1;
        }
        .b7:hover:before{
        	width: 100%;
        	height: 100%; 
        	left: 0; 
        	bottom: 0;
        }
        /*SAMPLE-1 : BUTTON-8*/
        .btn-layout.b8:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            background-color: #1d8ef7;
        }
        .btn-layout.b8:hover:after {
            width: 0%;
        }
        
        
        /*------------------------------SAMPLE-2------------------------------*/
        /*SAMPLE-2 : BUTTON-1*/
        .bt1:before{
        	content: ""; 
        	width: 100%;
        	height: 0;
        	position: absolute; 
        	background-color: #2ecc71; 
        	top: 50%;
        	left: 0;
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s;
        	z-index: -1;
        }
        .bt1:after{
        	content: ""; 
        	width: 100%; 
        	height: 0; 
        	position: absolute; 
        	background-color: #2ecc71; 
        	left: 0; 
        	bottom: 50%;
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        }
        .bt1:hover:before, .bt1:hover:after{
        	height: 50%;
        }
        .bt1:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-2*/
        .bt2:before{
        	content: ""; 
        	width: 100%;
        	height: 0;
        	position: absolute; 
        	background-color: #9b59b6; 
        	left: 0;
        	bottom: 0;
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s;
        	z-index: -1;
        }
        .bt2:after{
        	content: ""; 
        	width: 100%; 
        	height: 0; 
        	position: absolute; 
        	background-color: #9b59b6; 
        	right: 0; 
        	top: 0; 
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        }
        .bt2:hover:before, .bt2:hover:after{
        	height: 50%;
        }
        .bt2:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-3*/
        .bt3:before{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute; 
        	background-color: #ff5722; 
        	left: 50%;
        	top: 0; 
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        	}
        .bt3:after{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute;
        	background-color: #ff5722;
         	right: 50%; 
         	top: 0; 
         	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        }
        .bt3:hover:before, .bt3:hover:after{
        	width: 50%;
        }
        .bt3:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-4*/
        .bt4:before{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute; 
        	background-color: #1d8ef7; 
        	left: 0;
        	top: 0; 
        	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        }
        .bt4:after{
        	content: ""; 
        	width: 0; 
        	height: 100%; 
        	position: absolute;
        	background-color: #1d8ef7;
         	right: 0; 
         	top: 0; 
         	transition: 0.4s;
        	-moz-transition: 0.4s;
        	-ms-transition: 0.4s;
        	-o-transition: 0.4s;
        	-webkit-transition: 0.4s; 
        	z-index: -1;
        }
        .bt4:hover:before, .bt4:hover:after{
        	width: 50%;
        }
        .bt4:hover {
            color: #fff;
        }
        /*SAMPLE-2 : BUTTON-5*/
        .bt5 {
            overflow: hidden;
        }
        .bt5 span {
        	position: absolute;
        	display: block;
        	width: 0;
        	height: 0;
        	border-radius: 50%;
        	left: -10px;
        	top: 70px;
        	background: #2ecc71;
        	transform: translate(-50%, -50%);
        	-webkit-transform: translate(-50%, -50%);
        	-moz-transform: translate(-50%, -50%);
        	-ms-transform: translate(-50%, -50%);
        	-o-transform: translate(-50%, -50%);
        	transition: width 0.7s, height 0.7s;
        	-webkit-transition: width 0.7s, height 0.7s;
        	-moz-transition: width 0.7s, height 0.7s;
        	-ms-transition: width 0.7s, height 0.7s;
        	-o-transition: width 0.7s, height 0.7s;
        	z-index: -1;
        }
        .bt5:hover {
            color: #ffffff;
        }
        .bt5:hover span {
            width: 500px;
            height: 500px;
        }
        .bt5:active {
            background: #2ecc71;
        }
        /*SAMPLE-2 : BUTTON-6*/
        .bt6 {
            overflow:hidden;
        }
        .bt6:before {
        	content: '';
        	width: 0;
        	z-index:-1;
        	height: 0;
        	transform: rotate(360deg);
        	-webkit-transform: rotate(360deg);
        	-moz-transform: rotate(360deg);
        	-ms-transform: rotate(360deg);
        	-o-transform: rotate(360deg);
        	border-style: solid;
        	border-width: 0 0 0 0;
        	border-color: transparent transparent transparent #9b59b6;
        	position: absolute;
        	bottom: 0;
        	left: 0;
        	transition: 0.5s;
        	-webkit-transition: 0.5s;
        	-moz-transition: 0.5s;
        	-ms-transition: 0.5s;
        	-o-transition: 0.5s;
        }
        .bt6:after {
        	content: '';
        	width: 0;
        	z-index:-1;
        	height: 0;
        	transform: rotate(360deg);
        	-webkit-transform: rotate(360deg);
        	-moz-transform: rotate(360deg);
        	-ms-transform: rotate(360deg);
        	-o-transform: rotate(360deg);
        	border-style: solid;
        	border-width: 0 0 0 0;
        	border-color: transparent #9b59b6 transparent transparent;
        	position: absolute;
        	top: 0;
        	right: 0;
        	transition: 0.5s;
        	-webkit-transition: 0.5s;
        	-moz-transition: 0.5s;
        	-ms-transition: 0.5s;
        	-o-transition: 0.5s;
        }
        .bt6:hover {
            color: white;
        }
        .bt6:hover:before {
            border-width: 108px 0 0 108px;
        }
        .bt6:hover:after {
            border-width: 0 108px 108px 0;
        }
        .bt6:active {
            background: #b8ba35;
        }
        /*SAMPLE-2 : BUTTON-7*/
        .bt7 {
            overflow:hidden;
        }
        .bt7:after {
        	content: '';
        	width: 0;
        	height: 0;
        	z-index: -1;
        	transform: rotate(360deg);
        	-webkit-transform: rotate(360deg);
        	-moz-transform: rotate(360deg);
        	-ms-transform: rotate(360deg);
        	-o-transform: rotate(360deg);
        	border-style: solid;
        	border-width: 0 0 0 0;
        	border-color: transparent #ff5722 transparent transparent;
        	position: absolute;
        	top: 0;
        	right: 0;
        	transition: 0.5s;
        	-webkit-transition: 0.5s;
        	-moz-transition: 0.5s;
        	-ms-transition: 0.5s;
        	-o-transition: 0.5s;
        }
        .bt7:before {
        	content: '';
        	width: 0;
        	height: 0;
        	z-index: -1;
        	transform: rotate(360deg);
        	-webkit-transform: rotate(360deg);
        	-moz-transform: rotate(360deg);
        	-ms-transform: rotate(360deg);
        	-o-transform: rotate(360deg);
        	border-style: solid;
        	border-width: 0 0 0 0;
        	border-color: transparent transparent transparent #ff5722;
        	position: absolute;
        	bottom: 0;
        	left: 0;
        	transition: 0.5s;
        	-webkit-transition: 0.5s;
        	-moz-transition: 0.5s;
        	-ms-transition: 0.5s;
        	-o-transition: 0.5s;
        }
        .bt7:hover {
            color: white;
        }
        .bt7:hover:before, .bt7:hover:after {
            border-width: 80px 215px;
        }
        .bt7:active {
            background: #ff5722;
        }
        /*SAMPLE-2 : BUTTON-8*/
        .btn-layout.bt8:after {
        	position: absolute;
        	transition: 0.3s;
        	-webkit-transition: 0.3s;
        	-moz-transition: 0.3s;
        	-ms-transition: 0.3s;
        	-o-transition: 0.3s;
        	content: '';
        	width: 0;
        	left: 50%;
        	bottom: 0;
        	height: 3px;
        	background: #1d8ef7;
        }
        .btn-layout.bt8:after {
        	height: 130%;
        	left: -10%;
        	transform: skewX(15deg);
        	-webkit-transform: skewX(15deg);
        	-moz-transform: skewX(15deg);
        	-ms-transform: skewX(15deg);
        	-o-transform: skewX(15deg);        
        	z-index: -1;
        }
        .btn-layout.bt8:hover {
            color: white;
        }
        .btn-layout.bt8:hover:after {
            left: -10%;
            width: 120%;
        }
        
        
        /*------------------------------SAMPLE-3------------------------------*/
        /*FOR SAMPLE-3 : BUTTON-7,8*/
        .btn-border-o:before, .btn-border-o:after, .btn-border-rev-o:before, .btn-border-rev-o:after {
        	transition: all 0.3s;
        	-webkit-transition: all 0.3s;
        	-moz-transition: all 0.3s;
        	-ms-transition: all 0.3s;
        	-o-transition: all 0.3s;
        }
        .bttn{
        	 overflow:visible;
        }
        .bttn:after {
        	pointer-events: none;
        	position: absolute;
        	width: 100%;
        	border-radius: 3px;
        	height: 100%;
        	content: '';
        	-webkit-box-sizing: content-box;
        	-moz-box-sizing: content-box;
        	box-sizing: content-box;
        }
        .bttn:before {
        	speak: none;
        	font-style: normal;
        	font-weight: normal;
        	font-variant: normal;
        	text-transform: none;
        	display: block;
        	-webkit-font-smoothing: antialiased;
        }
        /*SAMPLE-3 : BUTTON-1*/
        .bttn.e1 {
        	-webkit-transition: background 0.2s, color 0.2s;
        	-moz-transition: background 0.2s, color 0.2s;
        	transition: background 0.2s, color 0.2s;
        	-ms-transition: background 0.2s, color 0.2s;
        	-o-transition: background 0.2s, color 0.2s;
        }
        .bttn.e1:hover, .bttn.e1:hover a {
            color: #2ecc71;
        	border-color: #2ecc71;
        }
        .bttn.e1:after {
            top: 5px;
            left: 5px;
            z-index: -1;
            opacity: 0;
        }
        .bttn.e1.layer-1:after {
        	box-shadow: 1px 1px 2px 0px #2ecc71;
        	-webkit-transform: rotate(-90deg);
        	-moz-transform: rotate(-90deg);
        	-ms-transform: rotate(-90deg);
        	-o-transform: rotate(-90deg);
        	transform: rotate(-90deg);
        	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
        	-moz-transition: opacity 0.2s, -moz-transform 0.2s;
        	transition: opacity 0.2s, transform 0.2s;
        	-ms-transition: opacity 0.2s, -ms-transform 0.2s;
        	-o-transition: opacity 0.2s, -o-transform 0.2s;
        }
        .bttn.e1.layer-1:hover:after {
        	opacity: 1;
        	-webkit-transform: rotate(0deg);
        	-moz-transform: rotate(0deg);
        	-ms-transform: rotate(0deg);
        	-o-transform: rotate(0deg);
        	transform: rotate(0deg);
        }
        .bttn.e1.layer-1:before {
        	-webkit-transform: scale(0.8);
        	-moz-transform: scale(0.8);
        	-o-transform: scale(0.8);
        	-ms-transform: scale(0.8);
        	transform: scale(0.8);
        	opacity: 0.7;
        	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
        	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
        	transition: transform 0.2s, opacity 0.2s;
        	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
        	-o-transition: -o-transform 0.2s, opacity 0.2s;
        }
        .bttn.e1.layer-1:hover:before {
        	-webkit-transform: scale(1);
        	-moz-transform: scale(1);
        	-o-transform: scale(1);
        	-ms-transform: scale(1);
        	transform: scale(1);
        	opacity: 1;
        }
        /*SAMPLE-3 : BUTTON-2*/
        .bttn.e2 {
        	-webkit-transition: background 0.2s, color 0.2s;
        	-moz-transition: background 0.2s, color 0.2s;
        	transition: background 0.2s, color 0.2s;
        	-ms-transition: background 0.2s, color 0.2s;
        	-o-transition: background 0.2s, color 0.2s;
        }
        .bttn.e2:hover, .bttn.e2:hover a {
            color: #9b59b6;
        	border-color:#9b59b6;
        }
        .bttn.e2:after {
        	top: 5px;
        	left: 5px;
        	z-index: -1;
        	opacity: 0;
        }
        .bttn.e2.layer-2:after {
        	box-shadow: 0 0 0 white;
        	-webkit-transition: opacity 0.2s, box-shadow 0.2s;
        	-moz-transition: opacity 0.2s, box-shadow 0.2s;
        	transition: opacity 0.2s, box-shadow 0.2s;
        	-ms-transition: opacity 0.2s, box-shadow 0.2s;
        	-o-transition: opacity 0.2s, box-shadow 0.2s;
        }
        .bttn.e2.layer-2:hover:after {
            opacity: 1;
            box-shadow: 1px 1px 2px 0px #9b59b6;
        }
        .bttn.e2.layer-2:before {
        	-webkit-transform: scale(0.8);
        	-moz-transform: scale(0.8);
        	-ms-transform: scale(0.8);
        	-o-transform: scale(0.8);
        	transform: scale(0.8);
        	opacity: 0.7;
        	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
        	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
        	transition: transform 0.2s, opacity 0.2s;
        	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
        	-o-transition: -o-transform 0.2s, opacity 0.2s;
        }
        .bttn.e2.layer-2:hover:before {
        	-webkit-transform: scale(1);
        	-moz-transform: scale(1);
        	-o-transform: scale(1);
        	-ms-transform: scale(1);
        	transform: scale(1);
        	opacity: 1;
        }
        /*SAMPLE-3 : BUTTON-3*/
        .bttn.e3 {
        	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        	-o-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        	-ms-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        }
        .bttn.e3:after {
            display: none;
        }
        .bttn.e3:hover {
            background: white;
            color: #ff5722;
            box-shadow: 0 0 0 5px hsla(14, 100%, 57%, 0.3);
        	border-color: hsla(14, 100%, 57%, 0.3);
        }
        .bttn.e3:hover a {
            color: #ff5722;
        }
        .bttn.e3.layer-3:hover:before {
        	-webkit-animation: toRightFromLeft 0.3s forwards;
        	-moz-animation: toRightFromLeft 0.3s forwards;
        	animation: toRightFromLeft 0.3s forwards;
        	-ms-animation: toRightFromLeft 0.3s forwards;
        	-o-animation: toRightFromLeft 0.3s forwards;
        }
        @-webkit-keyframes toRightFromLeft {		
          49% {
            -webkit-transform: translate(100%);
          }
          50% {
            opacity: 0;
            -webkit-transform: translate(-100%);
          }
          51% {
            opacity: 1;
          }
        }
        @-moz-keyframes toRightFromLeft {	
          49% {
            -moz-transform: translate(100%);
          }
          50% {
            opacity: 0;
            -moz-transform: translate(-100%);
          }
          51% {
            opacity: 1;
          }
        }
        @-o-keyframes toRightFromLeft {		
          49% {
            -o-transform: translate(100%);
          }
          50% {
            opacity: 0;
            -o-transform: translate(-100%);
          }
          51% {
            opacity: 1;
          }
        }
        @-ms-keyframes toRightFromLeft {	
          49% {
            -ms-transform: translate(100%);
          }
          50% {
            opacity: 0;
            -ms-transform: translate(-100%);
          }
          51% {
            opacity: 1;
          }
        }
        @keyframes toRightFromLeft {
          49% {
            transform: translate(100%);
          }
          50% {
            opacity: 0;
            transform: translate(-100%);
          }
          51% {
            opacity: 1;
          }
        }
        /*SAMPLE-3 : BUTTON-4*/
        .bttn.e4 {
        	-webkit-transition: box-shadow 0.2s;
        	-moz-transition: box-shadow 0.2s;
        	transition: box-shadow 0.2s;
        	-ms-transition: box-shadow 0.2s;
        	-o-transition: box-shadow 0.2s;
        }
        .bttn.e4:after {
        	top: 0;
        	left: 0;
        	padding: 0;
        	box-shadow: 0 0 0 1px;
        	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
        	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
        	transition: transform 0.2s, opacity 0.2s;
        	-o-transition: -o-transform 0.2s, opacity 0.2s;
        	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
        }
        .bttn.e4.layer-4:hover:after {
        	-webkit-transform: scale(0.86);
        	-moz-transform: scale(0.86);
        	-ms-transform: scale(0.86);
        	-o-transform: scale(0.86);
        	transform: scale(0.86);
        }
        .bttn.e4.layer-4:hover {
            box-shadow: 0 0 0 5px rgba(29, 142, 247, 0.3);
            color: #1d8ef7;
        	border-color: rgba(29, 142, 247, 0.3);
        }
        .bttn.e4.layer-4:hover a {
            color: #1d8ef7;
        }
        /*SAMPLE-3 : BUTTON-5*/
        .e5 {
        	-webkit-transition: all 0.5s;
        	-moz-transition: all 0.5s;
        	-ms-transition: all 0.5s;
        	-o-transition: all 0.5s;
        	transition: all 0.5s;
        	position: relative;
        	border: 1px solid #b3b3b3;
        }
        .e5 a{
        	color: rgba(51,51,51,1);
        	text-decoration: none;
        	display: block;
        }
        .e5:hover {
        	background-color: rgba(255,255,255,0.2);
        	-webkit-border-radius: 25px;
        	-moz-border-radius: 25px;
        	border-radius: 25px;
        	border-color: #9b59b6;	
        	color:#9b59b6;
        }
        /*SAMPLE-3 : BUTTON-6*/
        .btn-border-o{
            background-color: transparent;
            border: 1px solid #b3b3b3;
        }
        .btn-border-o:before, .btn-border-o:after {
        	content: '';
        	border-style: solid;
        	position: absolute;
        	z-index: 5;
        	border-radius: 3px;
        	box-sizing: content-box;
        }
        .btn-border-o:before {
        	width: 0;
        	height: 100%;
        	border-width: 1px 0 1px 0;
        	top: -1px;
        	left: 0;
        	-webkit-transition-delay: 0.05s;
        	-moz-transition-delay: 0.05s;
        	-ms-transition-delay: 0.05s;
        	-o-transition-delay: 0.05s;
        	transition-delay: 0.05s;
        }
        .btn-border-o:after {
        	width: 100%;
        	height: 0;
        	border-width: 0 1px 0 1px;
        	top: 0;
        	left: -1px;
        }
        .btn-border-o:hover:before {
            width: 100%;
        }
        .btn-border-o:hover:after {
            height: 100%;
        }
        .btn-border-o.btn-purple:before, .btn-border-o.btn-purple:after {
            border-color: rgba(51,51,51,1);
        }
        .btn-border-o.btn-purple:hover {
            color: rgba(51,51,51,1);
        }
        /*SAMPLE-3 : BUTTON-7*/
        .btn-border-rev-o {
            background-color: transparent;
            border: 1px solid #b3b3b3;
        }
        .btn-border-rev-o:before, .btn-border-rev-o:after {
        	content: '';
        	border-style: solid;
        	position: absolute;
        	z-index: 5;
        	border-radius: 3px;
        	box-sizing: content-box;
        }
        .btn-border-rev-o:before {
        	width: 0;
        	height: 100%;
        	border-width: 1px 0 1px 0;
        	top: -1px;
        	right: 0;
        	-webkit-transition-delay: 0.05s;
        	-moz-transition-delay: 0.05s;
        	-ms-transition-delay: 0.05s;
        	-o-transition-delay: 0.05s;
        	transition-delay: 0.05s;
        }
        .btn-border-rev-o:after {
        	width: 100%;
        	height: 0;
        	border-width: 0 1px 0 1px;
        	bottom: 0;
        	left: -1px;
        }
        .btn-border-rev-o:hover:before {
            width: 100%;
        }
        .btn-border-rev-o:hover:after {
            height: 100%;
        }
        .btn-border-rev-o.btn-orange:before, .btn-border-rev-o.btn-orange:after {
            border-color: rgba(51,51,51,1);
        }
        .btn-border-rev-o.btn-orange:hover {
            color: rgba(51,51,51,1);
        }
        /*SAMPLE-3 : BUTTON-8*/
        .e8 {
        	-webkit-transition: all 0.3s;
        	-moz-transition: all 0.3s;
        	-o-transition: all 0.3s;
        	transition: all 0.3s;
        	position: absolute;
        	border: 1px solid #b3b3b3;
        	overflow: hidden;
        	left: 1198px;
        }
        .e8:hover{
        	border: 0px solid #1d8ef7;
        	color: #1d8ef7;
        }
        .e8 a{
        	color: rgba(51,51,51,1);
        	text-decoration: none;
        	display: block;
        }
        .e8::before{
        	content: '';
        	position: absolute;
        	bottom: 0;
        	left: 0;
        	width: 100%;
        	height: 1px;
        	z-index: 1;
        	-webkit-transition: all 0.5s;
        	-moz-transition: all 0.5s;
        	-o-transition: all 0.5s;
        	transition: all 0.5s;
        	-webkit-transform: translate(-100%, -600%) rotate(30deg);
        	-moz-transform: translate(-100%, -600%)  rotate(30deg);
        	-ms-transform: translate(-100%, -600%)  rotate(30deg);
        	-o-transform: translate(-100%, -600%)  rotate(30deg);
        	transform: translate(-100%, -600%)  rotate(30deg); 		
        	background-color: #1d8ef7;
        	-webkit-transition-timing-function: cubic-bezier(0.3, 0, 0.125, 0.1);
        	-moz-transition-timing-function: cubic-bezier(0.3, 0, 0.125, 0.1);
        	-ms-transition-timing-function: cubic-bezier(0.3, 0, 0.125, 0.1);
        	-o-transition-timing-function: cubic-bezier(0.3, 0, 0.125, 0.1);
        	transition-timing-function: cubic-bezier(0.3, 0, 0.125, 0.1);
        }
        .e8:hover::before{
        	-webkit-transform: translate(0,0);
        	-moz-transform: translate(0,0);
        	-ms-transform: translate(0,0);
        	-o-transform: translate(0,0);
        	transform: translate(0,0);	
        }
        
        
        /*------------------------------SAMPLE-4------------------------------*/
        /*SAMPLE-4 : BUTTON-1*/
        .eff-1::before,
        .eff-1::after {
        	content: attr(data-text);
        	position: absolute;
        	width: 100%;
        	height: 50%;
        	left: 0;
        	background: #2ecc71;
        	color: #fff;
        	overflow: hidden;
        	-webkit-transition: -webkit-transform 0.3s;
        	-moz-transition: -moz-transform 0.3s;
        	-ms-transition: -ms-transform 0.3s;
        	-o-transition: -o-transform 0.3s;
        	transition: transform 0.3s;
        	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        	-moz-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        	-ms-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        	-o-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        }
        .eff-1::before {
        	top: -2px;
        	padding-top: 21.5px;
        }
        .eff-1::after {
        	bottom: 0;
        	line-height: 0;
        }
        .eff-1:hover::before {
        	-webkit-transform: translate3d(0, -100%, 0);
        	-moz-transform: translate3d(0, -100%, 0);
        	-ms-transform: translate3d(0, -100%, 0);
        	-o-transform: translate3d(0, -100%, 0);
        	transform: translate3d(0, -100%, 0);
        	border-color:#2ecc71;
        }
        .eff-1:hover::after {
        	-webkit-transform: translate3d(0, 100%, 0);
        	-moz-transform: translate3d(0, 100%, 0);
        	-ms-transform: translate3d(0, 100%, 0);
        	-o-transform: translate3d(0, 100%, 0);
        	transform: translate3d(0, 100%, 0);
        }
        .eff-1:hover{
        	color:#2ecc71;
        	border-color:#2ecc71;
        }
        /*SAMPLE-4 : BUTTON-2*/
        .eff-2 {
        	background: #9b59b6;
        	color: #fff;
        	overflow: hidden;
        	-webkit-transition: background-color 0.3s;
        	-moz-transition: background-color 0.3s;
        	-ms-transition: background-color 0.3s;
        	-o-transition: background-color 0.3s;
        	transition: background-color 0.3s;
        }
        .eff-2 > span {
        	display: block;
        	position:relative;
        	left: -69px;
        	opacity: 0;
        	color: #fff;
        	-webkit-transform: translate3d(0, -10px, 0);
        	-moz-transform: translate3d(0, -10px, 0);
        	-ms-transform: translate3d(0, -10px, 0);
        	-o-transform: translate3d(0, -10px, 0);
        	transform: translate3d(0, -10px, 0);
        	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        	-moz-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        	-ms-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        	-o-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        	transition: transform 0.3s, opacity 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);
        }
        .eff-2::before {
        	content: attr(data-text);
        	top: 0;
        	left: 0;
        	height: 100%;
        	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
        	-ms-transition: -ms-transform 0.3s, opacity 0.3s;
        	-o-transition: -o-transform 0.3s, opacity 0.3s;
        	transition: transform 0.3s, opacity 0.3s;
        	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        	-moz-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        	-ms-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        	-o-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        }
        .eff-2:hover {
        	background-color: rgba(155, 89, 182, 0.58);
        }
        .eff-2:hover::before {
        	opacity: 0;
        	-w.........完整代码请登录后点击上方下载按钮下载查看

网友评论0