Button Hover Effects – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Just Some MoreButton Hover Effects</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300); html { padding-top: 50px; font-family: 'Open Sans', Helvetica, arial, sans-serif; text-align: center; background-color: #eeeeee; } html *, html *:before, html *:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; } html i, html em, html b, html strong, html span { -webkit-transition: none; transition: none; } *:before, *:after { z-index: -1; } h1, h4 { font-family: 'Raleway', 'Open Sans', sans-serif; margin: 0; line-height: 1; } a { text-decoration: none; line-height: 80px; color: black; } .centerer { width: 100%; max-width: 600px; margin: 0 auto; } .wrap { width: 50%; float: left; } [class^="btn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor; } .btn-0 { color: #9e5e87; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #552744; } .btn-0:hover { color: #e3d0dc; } .btn-0:hover:before { width: 250px; } .btn-0:active { background: #8d4172; } .btn-1 { color: #aab0ac; } .btn-1:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #5d615e transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-1:hover { color: #e6e8e7; } .btn-1:hover:after { border-width: 330px 330px 0 0; } .btn-1:active { background: #9ba29d; } .btn-1-2 { color: #68a4cd; } .btn-1-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #2e5976; position: absolute; bottom: 0; left: 0; } .btn-1-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #2e5976 transparent; position: absolute; right: 0; bottom: 0; } .btn-1-2:hover { color: #d3e4f0; } .btn-1-2:hover:before { border-width: 206.25px 0 0 206.25px; } .btn-1-2:hover:after { border-width: 0 0 206.25px 206.25px; } .btn-1-2:active { background: #4d94c4; } .btn-2 { color: #782963; } .btn-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #3a022b; position: absolute; bottom: 0; left: 0; } .btn-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #3a022b transparent transparent; position: absolute; top: 0; right: 0; } .btn-2:hover { color: #d7c0d1; } .btn-2:hover:before { border-width: 165px 0 0 165px; } .btn-2:hover:after { border-width: 0 165px 165px 0; } .btn-2:active { background: #600347; } .btn-3 { color: #584596; } .btn-3:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #23164f; position: absolute; bottom: 0; left: 0; } .btn-3:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #23164f transparent transparent; position: absolute; top: 0; right: 0; } .btn-3 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #23164f transparent; position: absolute; right: 0; bottom: 0; } .btn-3 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #23164f transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-3:hover { color: #cec8e0; } .btn-3:hover:before { border-width: 165px 0 0 165px; } .btn-3:hover:after { border-width: 0 165px 165px 0; } .btn-3:hover span:before { border-width: 0 0 165px 165px; } .btn-3:hover span:after { border-width: 165px 165px 0 0; } .btn-3:active { background: #3a2484; } .btn-4 { color: #9666d0; } .btn-4:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #4f2d78 transparent transparent; position: absolute; top: 0; right: 0; } .btn-4:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #4f2d78; position: absolute; bottom: 0; left: 0; } .btn-4:before, .btn-4:after { border-color: #4f2d78; } .btn-4 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #4f2d78 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-4 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #4f2d78 transparent; position: absolute; right: 0; bottom: 0; } .btn-4 span:before, .btn-4 span:after { border-color: #4f2d78; } .btn-4:hover { color: #e0d2f1; } .btn-4:hover:before { border-width: 20px 62.5px; } .btn-4:hover:after { border-width: 20px 62.5px; } .btn-4:hover span:before { border-width: 20px 62.5px; } .btn-4:hover span:after { border-width: 20px 62.5px; } .btn-4:active { background: #834bc8; } .btn-5 { color: #3d8b77; } .btn-5:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #104739 transparent transparent; position: absolute; top: 0; right: 0; } .btn-5:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #104739; position: absolute; bottom: 0; left: 0; } .btn-5:hover { color: #c6ddd7; } .btn-5:hover:before, .btn-5:hover:after { border-width: 80px 262.5px; } .btn-5:active { background: #1b765f; } .btn-6 { color: #93c430; } .btn-6 span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #4d6f07; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.4s, height 0.4s; transition: width 0.4s, height 0.4s; z-index: -1; } .btn-6:hover { color: #dfeec2; } .btn-6:hover span { width: 562.5px; height: 562.5px; } .btn-6:active { background: #80b90c; } .btn-7 { color: #80744a; } .btn-7:before, .btn-7:after, .btn-7 span:before, .btn-7 span:after { content: ''; position: absolute; top: 0; width: 63.5px; height: 0; background: #3f3719; } .btn-7:before { left: 0; } .btn-7:after { left: 125px; } .btn-7 span:before, .btn-7 span:after { top: auto; bottom: 0; } .btn-7 span:before { left: 62.5px; } .btn-7 span:after { left: 187.5px; } .btn-7:hover { color: #dad6ca; } .btn-7:hover:before, .btn-7:hover:after, .btn-7:hover span:before, .btn-7:hover span:after { height: 80px; } .btn-7:active { background: #695b2a; } .btn-8 { color: #86547e; } .btn-8:before, .btn-8:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: #44203e; } .btn-8:after { top: auto; bottom: 0; } .btn-8:hover { color: #dccdd9; } .btn-8:hover:before, .btn-8:hover:after { height: 40px; } .btn-8:active { background: #713667; } .btn-9 { color: #5736b2; } .btn-9:before, .btn-9:after, .btn-9 span:before, .btn-9 span:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: rgba(34, 11, 98, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-9:after, .btn-9 span:before { top: auto; bottom: 0; } .btn-9 span:before, .btn-9 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-9:hover { color: #cec4e8; } .btn-9:hover:before, .btn-9:hover:after, .btn-9:hover span:before, .btn-9:hover span:after { height: 80px; } .btn-9:active { background: #3912a4; } .btn-10 { color: #4431c1; } .btn-10:before, .btn-10:after, .btn-10 span:before, .btn-10 span:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: rgba(21, 8, 109, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-10:after, .btn-10 span:before { left: auto; right: 0; } .btn-10 span:before, .btn-10 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-10:hover { color: #c8c3ed; } .btn-10:hover:before, .btn-10:hover:after, .btn-10:hover span:before, .btn-10:hover span:after { width: 250px; } .btn-10:active { background: #230db6; } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } .btn-11 { position: relative; color: #314153; } .btn-11:before, .btn-11:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background: #0d2035; border-radius: 50%; } .btn-11:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* animation: criss-cross-left 0.8s reverse; */ } .btn-11:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); /* animation: criss-cross-right 0.8s reverse; */ } .btn-11:hover:before, .btn-11:hover:after { /* @include size($btn-width); */ } .btn-11:hover:before { -webkit-animation: criss-cross-left 0.8s both; animation: criss-cross-left 0.8s both; } .btn-11:hover:after { -webkit-animation: criss-cross-right 0.8s both; animation: criss-cross-right 0.8s both; } </style> </head> <body> <div class="centerer"> <h1>Just Some More</h1> <h1>Button Hover Effects</h1> <h4>By: <a href="http://kylebrumm.com">Kyle Brumm</a></h4> <div class="wrap"> <a class="btn-0" href="#">Swipe</a> <a class="btn-1" href="#">Diagonal Swipe</a> <a class="btn-1-2" href="#">Double Swipe</a> <a class="btn-2" href="#">Diagonal Close</a> <a class="btn-3" href="#"><span>Zoning In</span></a> <a class="btn-4" href="#"><span>4 Corners</span></a> <a class="btn-5" href="#">Slice</a> </div> <div class="wrap"> <a class="btn-6" href="#">Position Aware<span></span></a> <a class="btn-7" href="#"><span>Alternate</span></a> <a class="btn-8" href="#">Smoosh</a> <a class="btn-9" href="#"><span>Vertical Overlap</span></a> <a class="btn-10" href="#"><span>Horizontal Overlap</span></a> <a class="btn-11" href="#">Collision</a> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { /* $('[class^="btn-"') .on('mouseenter', function(e) { $(this).removeClass('hovered'); }) .on('mouseout', function(e) { $(this).addClass('hovered'); });*/ $('.btn-6') .on('mouseenter', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({top:relY, left:relX}) }) .on('mouseout', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({top:relY, left:relX}) }); $('[href=#]').click(function(){return false}); }); </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> @import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'; html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; display: flex; flex-direction: column; flex-wrap: wrap; font-family: 'Open Sans Condensed', sans-serif; } div[class*=box] { height: 33.33%; width: 100%; display: flex; justify-content: center; align-items: center; } .box-1 { background-color: #FF6766; } .box-2 { background-color: #3C3C3C; } .box-3 { background-color: #66A182; } .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } /* ======================== BUTTON ONE ======================== */ .btn-one { color: #FFF; transition: all 0.3s; position: relative; } .btn-one span { transition: all 0.3s; } .btn-one::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.5); transform: scale(0.1, 1); } .btn-one:hover span { letter-spacing: 2px; } .btn-one:hover::before { opacity: 1; transform: scale(1, 1); } .btn-one::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.3s; background-color: rgba(255,255,255,0.1); } .btn-one:hover::after { opacity: 0; transform: scale(0.1, 1); } /* ======================== BUTTON TWO ======================== */ .btn-two { color: #FFF; transition: all 0.5s; position: relative; } .btn-two span { z-index: 2; display: block; position: absolute; width: 100%; height: 100%; } .btn-two::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); } .btn-two::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); } .btn-two:hover::before { transform: rotate(-45deg); background-color: rgba(255,255,255,0); } .btn-two:hover::after { transform: rotate(45deg); background-color: rgba(255,255,255,0); } /* ======================== BUTTON THREE ======================== */ .btn-three { color: #FFF; transition: all 0.5s; position: relative; } .btn-three::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.1); transition: all 0.3s; } .btn-three:hover::before { opacity: 0 ; transform: scale(0.5,0.5); } .btn-three::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.5); transform: scale(1.2,1.2); } .btn-three:hover::after { opacity: 1; transform: scale(1,1); } </style> </head> <body>  <div class="box-1"> <div class="btn btn-one"> <span>HOVER ME</span> </div> </div>  <div class="box-2"> <div class="btn btn-two"> <span>HOVER ME</span> </div> </div>  <div class="box-3"> <div class="btn btn-three"> <span>HOVER ME</span> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Button Hover Effects