"button"
Bootstrap 3.3.0 Snippet by Harut

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>
@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: #3e3f89; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #111146; } .btn-0:hover { color: #c6c7dc; } .btn-0:hover:before { width: 250px; } .btn-0:active { background: #1c1d74; } .btn-1 { color: #387bb3; } .btn-1:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #0d3c64 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-1:hover { color: #c5d8e9; } .btn-1:hover:after { border-width: 330px 330px 0 0; } .btn-1:active { background: #1564a6; } .btn-1-2 { color: #ba7970; } .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 #683a34; 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 #683a34 transparent; position: absolute; right: 0; bottom: 0; } .btn-1-2:hover { color: #ebd8d5; } .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: #ae6157; } .btn-2 { color: #8040a7; } .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 #3f125b; 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 #3f125b transparent transparent; position: absolute; top: 0; right: 0; } .btn-2:hover { color: #dac7e5; } .btn-2:hover:before { border-width: 165px 0 0 165px; } .btn-2:hover:after { border-width: 0 165px 165px 0; } .btn-2:active { background: #691e98; } .btn-3 { color: #8d4e33; } .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 #491c09; 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 #491c09 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 #491c09 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: #491c09 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-3:hover { color: #decbc3; } .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: #792f0f; } .btn-4 { color: #b849c6; } .btn-4:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #671971 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 #671971; position: absolute; bottom: 0; left: 0; } .btn-4:before, .btn-4:after { border-color: #671971; } .btn-4 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #671971 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 #671971 transparent; position: absolute; right: 0; bottom: 0; } .btn-4 span:before, .btn-4 span:after { border-color: #671971; } .btn-4:hover { color: #eacaee; } .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: #ab29bc; } .btn-5 { color: #b63197; } .btn-5:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #650850 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 #650850; position: absolute; bottom: 0; left: 0; } .btn-5:hover { color: #eac3e1; } .btn-5:hover:before, .btn-5:hover:after { border-width: 80px 262.5px; } .btn-5:active { background: #a90d85; } .btn-6 { color: #925fcd; } .btn-6 span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #4c2876; -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: #dfd0f0; } .btn-6:hover span { width: 562.5px; height: 562.5px; } .btn-6:active { background: #7f43c4; } .btn-7 { color: #ca68b6; } .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: #742e65; } .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: #f0d3ea; } .btn-7:hover:before, .btn-7:hover:after, .btn-7:hover span:before, .btn-7:hover span:after { height: 80px; } .btn-7:active { background: #c14da9; } .btn-8 { color: #bec171; } .btn-8:before, .btn-8:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: #6b6d35; } .btn-8:after { top: auto; bottom: 0; } .btn-8:hover { color: #ecedd5; } .btn-8:hover:before, .btn-8:hover:after { height: 40px; } .btn-8:active { background: #b2b658; } .btn-9 { color: #55a7cf; } .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(33, 91, 119, 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: #cde5f1; } .btn-9:hover:before, .btn-9:hover:after, .btn-9:hover span:before, .btn-9:hover span:after { height: 80px; } .btn-9:active { background: #3798c6; } .btn-10 { color: #c92750; } .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(115, 1, 29, 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: #efc0cc; } .btn-10:hover:before, .btn-10:hover:after, .btn-10:hover span:before, .btn-10:hover span:after { width: 250px; } .btn-10:active { background: #c00131; } @-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: #cd7ba4; } .btn-11:before, .btn-11:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background: #c46494; 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; }

Related: See More


Questions / Comments:

Very nice.

UltimateDaNS () - 7 years ago - Reply 0


superb I like it

Hardik Gondhiya () - 7 years ago - Reply 0