WordPress Hosting
Free Photos
WordPress Themes

bttn animation > collision

html { padding-top: 50px; font-family: 'Open Sans', Helvetica, arial, sans-serif; text-align: center; background-color: none; } html *, html *:before, html *:after { box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } 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; padding: 0 1rem; } @media (min-width: 600px) { .wrap { width: 50%; float: left; } } [class^="btn-"] { position: relative; display: block; overflow: hidden; width: 100%; height: 80px; max-width: 280px; margin: 1rem auto; text-transform: uppercase; border: 1px solid currentColor; } @-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: #0971c9; } .btn-11:before, .btn-11:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background-color: #5dbfcc; border-radius: 50%; } .btn-11:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-11:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .btn-11:hover { color: #fff; } .btn-11:hover:before { -webkit-animation: criss-cross-left 0.8s both; animation: criss-cross-left 0.8s both; -webkit-animation-direction: alternate; animation-direction: alternate; } .btn-11:hover:after { -webkit-animation: criss-cross-right 0.8s both; animation: criss-cross-right 0.8s both; -webkit-animation-direction: alternate; animation-direction: alternate; }
<div class="centerer">
<div class="wrap">
<a class="btn-11" href="#">Collision</a>
</div>
</div>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.