Botón movimiento vertical

Hermoso botón para insertar en nuestro Blog el cual tiene un movimiento vertical muy atractivo.

See the Pen floating button #codevember_06 by John Garcia (@johnbgarcia) on CodePen.

CODIGO HTML

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'> <div class="btn-wrap"><a class="floating-btn" href="#">I'M A BUTTON</a> <div class="shadow"></div> </div>

CODIGO CSS

.btn-wrap { position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -82px; } .floating-btn { display: block; font-family: "Oswald", sans-serif; max-width: 200px; background: #6F8AB7; position: relative; z-index: 1; padding: 20px 40px; color: white; margin: auto; box-shadow: 0 2px 0 #615D6C; text-decoration: none; border-radius: 5px; animation: bounce 2s ease-in-out forwards; animation-iteration-count: infinite; } .shadow { display: block; width: 20%; height: 0px; position: absolute; bottom: -30px; left: 0; right: 0; margin: auto; background: #6F8AB7; border-radius: 50%; animation: bounce-shadow 2s ease-in-out forwards; animation-iteration-count: infinite; } @keyframes bounce { 0% { transform: translateY(0px); } 50% { transform: translateY(20px); } } @keyframes bounce-shadow { 0% { width: 1%; height: 2px; opacity: 0.1; } 50% { width: 90%; height: 6px; opacity: 0.3; } 100% { width: 1%; height: 0px; opacity: 0; } }

ORIGEN DE LA ENTRADA: https://codepen.io/