css实现48种不同样式的按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现48种不同样式的按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在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