css实现70款不同风格鼠标悬浮按钮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现70款不同风格鼠标悬浮按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在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> @import url(css.css); body { background: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; } .buttons { width: 100%; float: left; } .container_odd { width: 100%; padding:50px 0; float: left; background:#f0f0f0; } .container_even { width: 100%; float: left; padding:50px 0; background:#fff; } h1 { color: #333; font-size: 2.5em; font-weight: 400; margin: 30px 0 10px 0; text-align:center; } h3 { color: #333; font-size: 1.5em; font-weight: 400; margin: 1.50em 0 1em 0; text-align: left; border-bottom: 1px solid rgba(255,255,255, 0.1); padding-bottom: 20px; } h4 { color: #666; font-size: 1.5em; font-weight: 100; margin:0px 0 40px 0; text-align:center; } .set_container { width: 1000px; margin: auto; padding-bottom:0px; clear: both; } .set_1_btn { color: #333; cursor: pointer; display: block; font-size: 16px; font-weight: 400; line-height: 45px; margin-right: 2em; text-align: center; max-width: 160px; position: relative; text-decoration: none; text-transform: uppercase; vertical-align: middle; width: 100%; } .set_1_btn:hover { text-decoration: none; } .Vbtn-1 { background:transparent; text-align: center; float:left; } .Vbtn-1 svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; } .Vbtn-1 rect { fill: none; stroke: #e1b700; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 450ms linear 0s; } .Vbtn-1:hover { background: rgba(225, 51, 45, 0); font-weight: 900; letter-spacing: 1px; transition: all 150ms linear 0s; } .Vbtn-1:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 48; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .Vbtn-2 { letter-spacing: 0; transition: all 150ms linear 0s; float:left; } .Vbtn-2:hover, .Vbtn-2:active { letter-spacing: 5px; transition: all 150ms linear 0s; } .Vbtn-2:after, .Vbtn-2:before { -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid rgba(255, 255, 255, 0); bottom: 0px; content: " "; display: block; margin: 0 auto; position: relative; -webkit-transition: all 280ms ease-in-out; transition: all 280ms ease-in-out; width: 0; } .Vbtn-2:hover:after, .Vbtn-2:hover:before { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-color: #56c5ff; -webkit-transition: width 350ms ease-in-out; transition: width 350ms ease-in-out; width: 70%; } .Vbtn-2:hover:before { bottom: auto; top: 0; width: 70%; } .Vbtn-3 { background:transparent; text-align: center; float:left; } .Vbtn-3 svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; } .Vbtn-3 rect { fill: none; stroke: #f2625a; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 450ms linear 0s; } .Vbtn-3:hover { background: rgba(225, 51, 45, 0); font-weight: 900; letter-spacing: 1px; transition: all 150ms linear 0s; } .Vbtn-3:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 48; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .Vbtn-4 { letter-spacing: 0; transition: all 150ms linear 0s; float:left; } .Vbtn-4:hover, .Vbtn-4:active { letter-spacing: 5px; transition: all 150ms linear 0s; } .Vbtn-4:after, .Vbtn-4:before { -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid rgba(255, 255, 255, 0); bottom: 0px; content: " "; display: block; margin: 0 auto; position: relative; -webkit-transition: all 280ms ease-in-out; transition: all 280ms ease-in-out; width: 0; } .Vbtn-4:hover:after, .Vbtn-4:hover:before { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-color: #666; -webkit-transition: width 350ms ease-in-out; transition: width 350ms ease-in-out; width: 70%; } .Vbtn-4:hover:before { bottom: auto; top: 0; width: 70%; } /* set2 start here */ .set_2_button { font: inherit; color: #FFF; width: auto; float: left; padding: 0px 25px; line-height: 45px; margin-right: 2.5em; overflow: hidden; position: relative; transition: all 1s; cursor: pointer; } .set_2_button:before { left: 48%; } .set_2_button:active { background: #cccccc; color: #000000; top: 2px; transition: all 1s; } .set_2_button > span { display: inline-block; transition: all 0.5s; } .icon-forward:before { content: "→"; position: absolute; } .icon-backward:before { content: "←"; position: absolute; } .icon-up:before { content: "↑"; position: absolute; } .icon-down:before { content: "↓"; position: absolute; } .set_2_btn-1:before { left: -100%; transition: all 0.5s; } .set_2_btn-1:hover:before { left: 48%; transition: all 1s; } .set_2_btn-1:hover > span { transform: translateX(300%); transition: all 1s; } .set_2_btn-2:before { top: -100%; transition: all 0.5s; } .set_2_btn-2:hover:before { top: 0px; } .set_2_btn-2:hover > span { transform: translateY(300%); } .color1{ background:#666666 ; } .color2{ background:#f8c013; color:#2e2302; } .color3{ background:#f2625a; } .color4{ background:#b9ccd2; color:#252b2d; } .color5{ background:#56c5ff; color:#fff; } /* set 2 end here */ .set_3_button { color: rgba(255,255,255,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; background:#666666; overflow: hidden; width: auto; padding: 0px 25px; margin-right: 2.5em; line-height: 45px; float: left; cursor: pointer; text-align: center; } .set_3_button a { color: rgba(51,51,51,1); text-decoration: none; display: block; } .set_3_button span { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button:hover { background-color: rgba(0,0,0,0.3); } .set_3_button:hover > span { opacity: 0; -webkit-transform: translate(0px, 40px); transform: translate(0px, 40px); } .set_3_button::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate(-30%, 0); transform: translate(-30%, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button:hover::after { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } /************************************/ .set_3_button2 { color:#2e2302; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; background:#e1b700; overflow: hidden; width: auto; padding: 0px 25px; margin-right: 2.5em; line-height: 45px; float: left; cursor: pointer; text-align: center; } .set_3_button2 a { color: rgba(51,51,51,1); text-decoration: none; display: block; } .set_3_button2 span { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button2:hover { background-color:#ffd311; } .set_3_button2:hover > span { opacity: 0; -webkit-transform: translate(0px, -40px); transform: translate(0px, -40px); } .set_3_button2::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate(0, 30%); transform: translate(0, 30%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button2:hover::after { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } /**********************************/ .set_3_button3 { color: rgba(255,255,255,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; background:#f2625a; overflow: hidden; width: auto; padding: 0px 25px; margin-right: 2.5em; line-height: 45px; float: left; cursor: pointer; text-align: center; } .set_3_button3 a { color: rgba(51,51,51,1); text-decoration: none; display: block; } .set_3_button3 span { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button3:hover { background-color:#dd483f; } .set_3_button3:hover > span { opacity: 0; -webkit-transform: translate(0px, 40px); transform: translate(0px, 40px); } .set_3_button3::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate(30%, 0); transform: translate(30%, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button3:hover::after { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } /***********************************/ .set_3_button4 { color:#252b2d; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; background:#b9ccd2 ; overflow: hidden; width: auto; padding: 0px 25px; margin-right: 2.5em; line-height: 45px; float: left; cursor: pointer; text-align: center; } .set_3_button4 a { color:#252b2d; text-decoration: none; display: block; } .set_3_button4 span { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button4:hover { background-color: #cce0e7; } .set_3_button4:hover > span { opacity: 0; -webkit-transform: translate(0px, -40px); transform: translate(0px, -40px); } .set_3_button4::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate(0, -30%); transform: translate(0, -30%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .set_3_button4:hover::after { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .set_4_button1 { position: relative; font-weight: 400; text-align: center; width: auto; float:left; padding:0 25px; line-height:45px; border:1px solid #fff; overflow: hidden; position: relative; z-index: 0; cursor: pointer; color:#FFF; margin-right: 2.5em; } .set_4_button1.raised { -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; background: #666666; } .set_4_button1.raised:active { background: #0c7dd8; box-shadow: 0px 1px 1px #063e6b; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .clickable .toggle:checked + .anim { -moz-animation: anim-in 0.75s; -webkit-animation: anim-in 0.75s; animation: anim-in 0.75s; } .clickable .toggle:checked + .anim:after { -moz-animation: anim-in-pseudo 0.75s; -webkit-animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s; } .clickable .toggle:not(:checked) + .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .clickable .toggle:not(:checked) + .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable:hover > .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .hoverable:hover > .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } @-webkit-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } .color1{ background:#666666 ; } .color2{ background:#f8c013; color:#2e2302; } .color3{ background:#f2625a; } .color4{ background:#b9ccd2; color:#252b2d; } .color5{ background:#56c5ff; color:#fff; } .set_4_button1 { position: relative; font-weight: 400; text-align: center; width: auto; float:left; padding:0 25px; line-height:45px; border:1px solid #fff; overflow: hidden; position: relative; z-index: 0; cursor: pointer; color:#FFF; margin-right: 2.5em; } .set_4_button1.raised { -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; background: #666666; } .set_4_button1.raised:active { background: #515151; box-shadow: 0px 1px 1px #063e6b; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .clickable .toggle:checked + .anim { -moz-animation: anim-in 0.75s; -webkit-animation: anim-in 0.75s; animation: anim-in 0.75s; } .clickable .toggle:checked + .anim:after { -moz-animation: anim-in-pseudo 0.75s; -webkit-animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s; } .clickable .toggle:not(:checked) + .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .clickable .toggle:not(:checked) + .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable:hover > .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .hoverable:hover > .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } @-webkit-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } /****** button 2 *******/ .set_4_button2 { position: relative; font-weight: 400; text-align: center; width: auto; float:left; padding:0 25px; line-height:45px; overflow: hidden; position: relative; z-index: 0; cursor: pointer; color:#2e2302; margin-right: 2.5em; } .set_4_button2.raised { -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; background: #f8c013; } .set_4_button2.raised:active { background: #515151; box-shadow: 0px 1px 1px #063e6b; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .clickable .toggle:checked + .anim { -moz-animation: anim-in 0.75s; -webkit-animation: anim-in 0.75s; animation: anim-in 0.75s; } .clickable .toggle:checked + .anim:after { -moz-animation: anim-in-pseudo 0.75s; -webkit-animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s; } .clickable .toggle:not(:checked) + .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .clickable .toggle:not(:checked) + .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable:hover > .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .hoverable:hover > .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } @-webkit-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } /****** button 3 *******/ .set_4_button3 { position: relative; font-weight: 400; text-align: center; width: auto; float:left; padding:0 25px; line-height:45px; overflow: hidden; position: relative; z-index: 0; cursor: pointer; color:#ffffff; margin-right: 2.5em; } .set_4_button3.raised { -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; background: #f2625a; } .set_4_button3.raised:active { background: #515151; box-shadow: 0px 1px 1px #063e6b; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .clickable .toggle:checked + .anim { -moz-animation: anim-in 0.75s; -webkit-animation: anim-in 0.75s; animation: anim-in 0.75s; } .clickable .toggle:checked + .anim:after { -moz-animation: anim-in-pseudo 0.75s; -webkit-animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s; } .clickable .toggle:not(:checked) + .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .clickable .toggle:not(:checked) + .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable:hover > .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .hoverable:hover > .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } @-webkit-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } /****** button 4 *******/ .set_4_button4 { position: relative; font-weight: 400; text-align: center; width: auto; float:left; padding:0 25px; line-height:45px; overflow: hidden; position: relative; z-index: 0; cursor: pointer; color:#252b2d; margin-right: 2.5em; } .set_4_button4.raised { -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; background: #b9ccd2; } .set_4_button4.raised:active { background: #515151; box-shadow: 0px 1px 1px #063e6b; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .clickable .toggle:checked + .anim { -moz-animation: anim-in 0.75s; -webkit-animation: anim-in 0.75s; animation: anim-in 0.75s; } .clickable .toggle:checked + .anim:after { -moz-animation: anim-in-pseudo 0.75s; -webkit-animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s; } .clickable .toggle:not(:checked) + .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .clickable .toggle:not(:checked) + .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable:hover > .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } .hoverable:hover > .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } @-webkit-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-in { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-in-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } /* button 1*/ .set_5_button { background: #666; color: white; overflow: hidden; z-index: 1; float: left; font-weight: 400; line-height: 45px; margin-right: 2.5em; cursor:pointer; overflow: hidden; padding: 0 25px; position: relative; text-align: center; width: auto; } .set_5_button:after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 1000%; background: #838383; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg); /transform: translateY(10%) translateX(16%) rotate(-45deg); transition: transform .3s; } .set_5_button:hover::after { transform: translateY(10%) translateX(-25px) rotate(-45deg); } /* button 2*/ .set_5_button2 { background: #e1b700; color:#2e2302; overflow: hidden; z-index: 1; float: left; font-weight: 400; line-height: 45px; margin-right: 2.5em; cursor:pointer; overflow: hidden; padding: 0 25px; position: relative; text-align: center; width: auto; } .set_5_button2:after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 1000%; background: #ffd311; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg); /transform: translateY(10%) translateX(16%) rotate(-45deg); transition: transform .3s; } .set_5_button2:hover::after { transform: translateY(10%) translateX(-25px) rotate(-45deg); } /* button 3*/ .set_5_button3 { background: #f2625a; color: white; overflow: hidden; z-index: 1; float: left; font-weight: 400; line-height: 45px; margin-right: 2.5em; cursor:pointer; overflow: hidden; padding: 0 25px; position: relative; text-align: center; width: auto; } .set_5_button3:after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 1000%; background: #dd483f; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg); /transform: translateY(10%) translateX(16%) rotate(-45deg); transition: transform .3s; } .set_5_button3:hover::after { transform: translateY(10%) translateX(-25px) rotate(-45deg); } /* button 4*/ .set_5_button4 { background: #b9ccd2 ; color: #252b2d; overflow: hidden; z-index: 1; float: left; font-weight: 400; line-height: 45px; margin-right: 2.5em; cursor:pointer; overflow: hidden; padding: 0 25px; position: relative; text-align: center; width: auto; } .set_5_button4:after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 1000%; background: #cce0e7; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg); /transform: translateY(10%) translateX(16%) rotate(-45deg); transition: transform .3s; } .set_5_button4:hover::after { transform: translateY(10%) translateX(-25px) rotate(-45deg); } .set_6_btn { display: inline-block; vertical-align: middle; position: relative; margin-right:2.5em; } .set_6_btn span { display: block; padding: 30px; color: #FFFFFF; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; cursor: pointer; float: left; font-weight: 400; line-height:20px; } .set_6_btn.out .corners { position: absolute; width: 100%; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .set_6_btn.out .corners:before, .set_6_btn.out .corners:after { content: ''; position: absolute; width: 7px; height: 7px; border-color:#ffd311; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transform: translateZ(0); transform: translateZ(0); } .set_6_btn.out .corners.top:before { border-width: 1px 0 0 1px; } .set_6_btn.out .corners.top:after { border-width: 1px 1px 0 0; } .set_6_btn.out .corners.bottom:before { border-width: 0 0 1px 1px; } .set_6_btn.out .corners.bottom:after { border-width: 0 1px 1px 0; } .set_6_btn.out .corners:before { left: 0; } .set_6_btn.out .corners:after { right: 0; } .set_6_btn.out .corners.top { top: 0; } .set_6_btn.out .corners.bottom { bottom: 7px; } .set_6_btn.out:hover .corners:before { left: 20px; } .set_6_btn.out:hover .corners:after { right: 20px; } .set_6_btn.out:hover .corners.top { top: 20px; } .set_6_btn.out:hover .corners.bottom { bottom: 27px; } .set_6_btn.in .corners { position: absolute; width: 100%; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .set_6_btn.in .corners:before, .set_6_btn.in .corners:after { content: ''; position: absolute; width: 7px; height: 7px; border-color: #FFB902; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transform: translateZ(0); transform: translateZ(0); } .set_6_btn.in .corners.top:before { border-width: 1px 0 0 1px; } .set_6_btn.in .corners.top:after { border-width: 1px 1px 0 0; } .set_6_btn.in .corners.bottom:before { border-width: 0 0 1px 1px; } .set_6_btn.in .corners.bottom:after { border-width: 0 1px 1px 0; } .set_6_btn.in .corners:before { left: 20px; } .set_6_btn.in .corners:after { right: 20px; } .set_6_btn.in .corners.top { top: 20px; } .set_6_btn.in .corners.bottom { bottom: 27px; } .set_6_btn.in:hover .corners:before { left: 0; } .set_6_btn.in:hover .corners:after { right: 0; } .set_6_btn.in:hover .corners.top { top: 0; } .set_6_btn.in:hover .corners.bottom { bottom: 7px; } .set_6_btn.yellow span { color:#333; } .set_6_btn.yellow .corners:after, .set_6_btn.yellow .corners:before { border-color: #ffd311; } .set_6_btn.grey span { color:#333; } .set_6_btn.grey .corners:after, .set_6_btn.grey .corners:before { border-color: #838383; } .set_6_btn.red span { color:#333; } .set_6_btn.red .corners:after, .set_6_btn.red .corners:before { border-color: #dd483f; } .set_6_btn.blue span { color:#333; } .set_6_btn.blue .corners:after, .set_6_btn.blue .corners:before { border-color: #56c5ff ; } .set_7_btn-wrapper { float:left; width:auto; line-height: 45px; display: inline-block; margin-right:2em; text-align:center; } #set_7_button1 { stroke-width: 6px; fill: transparent; stroke: #666666; stroke-dasharray: 85 400; stroke-dashoffset: -228; transition: 1s all ease; } .set_7_btn-wrapper:hover #set_7_button1 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #666666; } #set_7_text { margin-top:-60px; text-align: center; } #set_7_text a { color: #333; text-decoration: none; font-weight:400; } /*button 2*/ #set_7_button2 { stroke-width: 6px; fill: transparent; stroke: #ffd311 ; stroke-dasharray: 85 400; stroke-dashoffset: -228; transition: 1s all ease; } .set_7_btn-wrapper:hover #set_7_button2 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #ffd311; } /*button 3*/ #set_7_button3 { stroke-width: 6px; fill: transparent; stroke: #dd483f ; stroke-dasharray: 85 400; stroke-dashoffset: -228; transition: 1s all ease; } .set_7_btn-wrapper:hover #set_7_button3 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #dd483f; } /*button 4*/ #set_7_button4 { stroke-width: 6px; fill: transparent; stroke: #56c5ff; stroke-dasharray: 85 400; stroke-dashoffset: -228; transition: 1s all ease; } .set_7_btn-wrapper:hover #set_7_button4 { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #56c5ff; } .set_8_button { display: inline-block; font-weight: 400; padding: 0px 25px; line-height:45px; text-decoration: none; margin-right: 2em; cursor:pointer; text-align: center; transition: background 300ms; } .set_8_button.outline { color: #333; overflow: hidden; position: relative; } .set_8_button.outline:before, .set_8_button.outline:after, .set_8_button.outline .lines:before, .set_8_button.outline .lines:after { background-color: #666666; content: ""; height: 2px; left: 0; position: absolute; top: 0; transition: transform 300ms; width: 100%; } .set_8_button.outline:before { bottom: 0; top: auto; } .set_8_button.outline .lines { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .set_8_button.outline .lines:before, .set_8_button.outline .lines:after { height: 100%; width: 2px; } .set_8_button.outline .lines:after { left: auto; right: 0; } .set_8_button:hover:before { transform: translateX(-100%); } .set_8_button:hover:after { transform: translateX(100%); } .set_8_button:hover .lines:before { transform: translateY(-100%); } .set_8_button:hover .lines:after { transform: translateY(100%); } /*** button 2 ***/ .set_8_button2 { display: inline-block; font-weight: 400; padding: 0px 25px; line-height:45px; text-decoration: none; margin-right: 2em; cursor:pointer; text-align: center; transition: background 300ms; } .set_8_button2.outline { color: #333; overflow: hidden; position: relative; } .set_8_button2.outline:before, .set_8_button2.outline:after, .set_8_button2.outline .lines:before, .set_8_button2.outline .lines:after { background-color: #f8c013; content: ""; height: 2px; left: 0; position: absolute; top: 0; transition: transform 300ms; width: 100%; } .set_8_button2.outline:before { bottom: 0; top: auto; } .set_8_button2.outline .lines { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .set_8_button2.outline .lines:before, .set_8_button2.outline .lines:after { height: 100%; width: 2px; } .set_8_button2.outline .lines:after { left: auto; right: 0; } .set_8_button2:hover:before { transform: translateX(-100%); } .set_8_button2:hover:after { transform: translateX(100%); } .set_8_button2:hover .lines:before { transform: translateY(-100%); } .set_8_button2:hover .lines:after { transform: translateY(100%); } /*** button 3 ***/ .set_8_button3 { display: inline-block; font-weight: 400; padding: 0px 25px; line-height:45px; text-decoration: none; margin-right: 2em; cursor:pointer; text-align: center; transition: background 300ms; } .set_8_button3.outline { color: #333; overflow: hidden; position: relative; } .set_8_button3.outline:before, .set_8_button3.outline:after, .set_8_button3.outline .lines:before, .set_8_button3.outline .lines:after { background-color: #dd483f; content: ""; height: 2px; left: 0; position: absolute; top: 0; transition: transform 300ms; width: 100%; } .set_8_button3.outline:before { bottom: 0; top: auto; } .set_8_button3.outline .lines { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .set_8_button3.outline .lines:before, .set_8_button3.outline .lines:after { height: 100%; width: 2px; } .set_8_button3.outline .lines:after { left: auto; right: 0; } .set_8_button3:hover:before { transform: translateX(-100%); } .set_8_button3:hover:after { transform: translateX(100%); } .set_8_button3:hover .lines:before { transform: translateY(-100%); } .set_8_button3:hover .lines:after { transform: translateY(100%); } /*** button 4 ***/ .set_8_button4 { display: inline-block; font-weight: 400; padding: 0px 25px; line-height:45px; text-decoration: none; margin-right: 2em; cursor:pointer; text-align: center; transition: background 300ms; } .set_8_button4.outline { color: #333; overflow: hidden; position: relative; } .set_8_button4.outline:before, .set_8_button4.outline:after, .set_8_button4.outline .lines:before, .set_8_button4.outline .lines:after { background-color: #56c5ff; content: ""; height: 2px; left: 0; position: absolute; top: 0; transition: transform 300ms; width: 100%; } .set_8_button4.outline:before { bottom: 0; top: auto; } .set_8_button4.outline .lines { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .set_8_button4.outline .lines:before, .set_8_button4.outline .lines:after { height: 100%; width: 2px; } .set_8_button4.outline .lines:after { left: auto; right: 0; } .set_8_button4:hover:before { transform: translateX(-100%); } .set_8_button4:hover:after { transform: translateX(100%); } .set_8_button4:hover .lines:before { transform: translateY(-100%); } .set_8_button4:hover .lines:after { transform: translateY(100%); } .set_9_btn-corner { padding: 0px 25px; border: none; background: transparent; color: #333; width:auto; float:left; position:relative; line-height:45px; cursor:pointer; margin-right: 2em; } .set_9_btn-corner span { position: absolute; background-color: #666666; display: block; transition: all 200ms; } .set_9_btn-corner .line1, .set_9_btn-corner .line3 { height: 2px; width: 20px; } .set_9_btn-corner .line2, .set_9_btn-corner .line4 { height: 20px; width: 2px; } .set_9_btn-corner .line1, .set_9_btn-corner .line2 { top: 0; right: 0; } .set_9_btn-corner .line3, .set_9_btn-corner .line4 { bottom: 0; left: 0; } .set_9_btn-corner.reverse .line1, .set_9_btn-corner.reverse .line3 { width: 100%; } .set_9_btn-corner.reverse .line2, .set_9_btn-corner.reverse .line4 { height: 100%; } .set_9_btn-corner:hover, .set_9_btn-corner:active { background-color: transparent; color: #333; } .set_9_btn-corner:hover .line1, .set_9_btn-corner:active .line1, .set_9_btn-corner:hover .line3, .set_9_btn-corner:active .line3 { width: 100%; } .set_9_btn-corner:hover .line2, .set_9_btn-corner:active .line2, .set_9_btn-corner:hover .line4, .set_9_btn-corner:active .line4 { height: 100%; } .set_9_btn-corner:hover.reverse .line1, .set_9_btn-corner:active.reverse .line1, .set_9_btn-corner:hover.reverse .line3, .set_9_btn-corner:active.reverse .line3 { width: 20px; } .set_9_btn-corner:hover.reverse .line2, .set_9_btn-corner:active.reverse .line2, .set_9_btn-corner:hover.reverse .line4, .set_9_btn-corner:active.reverse .line4 { height: 20px; } /* button 2*/ .set_9_btn2-corner { padding: 0px 25px; border: none; background: transparent; color: #333; width:auto; float:left; position:relative; line-height:45px; cursor:pointer; margin-right: 2em; } .set_9_btn2-corner span { position: absolute; background-color: #f8c013; display: block; transition: all 200ms; } .set_9_btn2-corner .line1, .set_9_btn2-corner .line3 { height: 2px; width: 20px; } .set_9_btn2-corner .line2, .set_9_btn2-c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0